/* Theme Name: Theme URI: Author: Author URI: Description: Version: 1.0 License: License URI: Tags: Text Domain: */ @charset "UTF-8"; /*-------------------------------------------------- ************************************************** リセット ************************************************** --------------------------------------------------*/ /* 内で html5reset.css を読み込んでます */ /*-------------------------------------------------- ************************************************** デフォルト ************************************************** --------------------------------------------------*/ /* 内で default.css を読み込んでます */ /*-------------------------------------------------- ************************************************** 基本 ************************************************** --------------------------------------------------*/ body { margin:0px; padding:0px; background:none repeat scroll 0% 0%; background-attachment:scroll; font-family: 'Noto Sans JP', sans-serif, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 游ゴシック体, 'Yu Gothic', YuGothic, メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; line-height: 1.6; letter-spacing: 0.8px; font-size: 14px; font-weight: 400; color:#333; } img { max-width: 100%; } .contents_inner{ width:98%; margin-left:auto; margin-right:auto; } /*-------------------------------------------------- ************************************************** テキスト・フォント ************************************************** --------------------------------------------------*/ em { color: #e58c93; font-weight: normal; font-style: normal; } .red { color:#ff0000;} .blue { color:#0000ff;} .green { color:#008000;} .black { color:#000; } .white { color:#fff; } /*-------------------------------------------------- ************************************************** リンク系（アンカー） ************************************************** --------------------------------------------------*/ a { color: #cc0000; text-decoration: none; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; outline: none; } a:hover { color: #cc0000; /*text-decoration: underline;*/ } a img{ display: block; transition: 0.5s; } a img:hover { -ms-filter: "alpha( opacity=80 )"; filter: alpha( opacity=80 ); opacity: 0.8; transition: 0.5s; } /* -- CSSで画像を整形していたら -- */ a.opa:hover { -ms-filter: "alpha( opacity=80 )"; filter: alpha( opacity=80 ); opacity: 0.8; transition: 0.5s; } /*-------------------------------------------------- ************************************************** main ************************************************** --------------------------------------------------*/ #main { position: relative; } #arcakit_logo { position: absolute; left: 30px; top: 30px; } #arcakit_logo img { width:45%; display:block; } .top_main { width:100%; margin:0 auto; } .top_main img { width:100%; display:block; margin:auto; } /*-------------------------------------------------- ************************************************** パンくず ************************************************** --------------------------------------------------*/ /* -- なし -- */ /*-------------------------------------------------- ************************************************** メインコンテンツ ************************************************** --------------------------------------------------*/ main { width:100%; background-image: url("/arcakit/common/image/recommended_coordination/bg_stripe_sp.png") ; background-repeat:repeat-y; background-position:center top; background-size:100% auto; } #items { padding: 20px 0 60px; width:90%; margin:0 auto; } .modal_area .items{ width:48%; margin-right:4%; margin-bottom:30px; background:#FFF; text-align:center; border-radius:10px; box-shadow:0 0 8px rgba(0,0,0,.35); } .modal_area .items:nth-child(2n){ margin-right:0; } .modal_area .items .thumbnail { border-radius:10px 10px 0 0; display:block; } .modal_area .items .brand_logo { max-width:65%; text-align:center; margin:0 auto; display:flex; justify-content:space-around; align-items:center; height:80px; } .modal_area .items .brand_logo img { width:auto; max-width:100%; margin: 20px auto; display:block; } .modal-content { position: fixed; display: none; z-index: 20; width:90%; height:auto; max-height: 90vh; overflow-y: scroll; top:5% !important; left:0 !important; right:0 !important; margin: 0 auto; padding: 0; background: #FFF; z-index:30000 !important; border-radius:25px; } .modal-overlay { z-index:1; display:none; position:fixed; top:0; left:0; width:100%; height:120%; background-color:rgba(0,0,0,0.75); z-index:20000 !important; } .modal-open:hover, .modal-close:hover { cursor:pointer; } .close_btn { position:absolute; right:15px; top:15px; } .modal_inner { width:100%; position:relative; } .modal_inner .logo { text-align:center; width: 100%; margin:40px auto 0; } .modal_inner .logo img { width:auto; max-width:50%; display:block; margin:0 auto; } .modal_inner .logo_name { color:#707071; text-align:center; margin-top:40px; font-size:3vw; width: 100%; } .modal_inner .photo { width:100%; margin-top:30px; } .modal_inner .photo img { width:100%; height:auto; display:block; } .modal_inner .box { width:100%; padding:20px; } .point_box { width:100%; border:5px solid #e9508a; border-radius:5px; } .point_box .point_icon { padding:10px 20px; width:100%; background:#e9508a; display:flex; } .point_box .point_icon img { width:auto; max-width:60%; display:block; margin:auto; } .point_box p { width:100%; padding:10px; background:#FFF; font-size:3.6vw; font-weight:bold; color:#604c3f; letter-spacing:0.1em; line-height:2em; } .point_box p span { padding-bottom:5px; border-bottom:1px dotted #c8bb9b; } .modal_inner ul { display:flex; flex-wrap:wrap; justify-content:space-between; } .modal_inner ul li { width:48%; margin-top:15px; color:#604c3f; font-size:3vw; font-weight:bold; } .modal_inner ul li p span { font-size:2vw; } .more_btn { width:70%; margin:30px auto 0; } .more_btn span { cursor:pointer; } .more_btn span img { width: 100%; display: block; } /*-------------------------------------------------- ************************************************** サブコンテンツ ************************************************** --------------------------------------------------*/ /* -- なし -- */ /*-------------------------------------------------- ************************************************** フッター ************************************************** --------------------------------------------------*/ footer { width: 86%; padding: 50px 0; background: #FFF; margin: 0 auto; } footer ul { text-align: center; } footer ul li { display: inline-block; margin: 0 10px; width: 60%; } footer ul li:nth-child(1) img { width: 100%; height: auto; display: block; } #copyright { margin-top:30px; text-align:center; color:#707070; font-size:2.8vw; } /*-------------------------------------------------- ************************************************** その他 (PageUpボタン 追従系 jsに関わるcssなど。) ************************************************** --------------------------------------------------*/ /* 上へ戻る */ .pagetop { padding-bottom:50px; display:block; width:10%; margin:0 auto; } .pagetop img { display:block; width:100%; margin:0 auto; } .pagetop_after{ position: fixed; right: 30px; bottom: 50px; display:block; width:60px; height:60px; animation: fadeIn 2s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal; } .pagetop_after img { width: 100%; height: auto; display: block; } @keyframes fadeIn{ 0%{opacity:0;} 100%{opacity:1;} } @-webkit-keyframes fadeIn{ 0%{opacity:0;} 100%{opacity:1;} }