/* 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: #fff; 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; } .contents_inner{ max-width:950px; min-width:768px; width:100%; margin-left:auto; margin-right:auto; } .content_box { width: 100%; box-sizing: border-box; background: #FFF; padding: 20px 0; } /*-------------------------------------------------- ************************************************** テキスト・フォント ************************************************** --------------------------------------------------*/ em { color: #e58c93; font-weight: normal; font-style: normal; } .red { color:#dd0000;} .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:calc(50% - 650px); top:50px; } #arcakit_logo img { width:227px; max-width:100%; display:block; } .top_main { padding-top:170px; margin:0 auto; } .top_main img { width:auto; max-width:100%; display:block; margin:auto; } /*-------------------------------------------------- ************************************************** パンくず ************************************************** --------------------------------------------------*/ /* -- なし -- */ /*-------------------------------------------------- ************************************************** メインコンテンツ ************************************************** --------------------------------------------------*/ main { width:100%; background-image: url("/arcakit/common/image/recommended_coordination/bg_flower.png"), url("/arcakit/common/image/recommended_coordination/bg_stripe.png") ; background-repeat: no-repeat, repeat-y ; background-position: center top, center top ; background-size: 100% auto, 100% auto ; display: block; } #items { padding: 160px 0 120px; width:1000px; max-width:100%; margin:0 auto; } .modal_area .items{ width:23.2%; margin-right:2.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(4n){ 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; } @media all and (-ms-high-contrast:none){ .modal_area .items .brand_logo img { width:80%; height:auto; margin: 20px auto; display:block; } } .modal-content { position: fixed; display: none; z-index: 20; width: 1000px; max-width:90%; height:auto; max-height:90% !important; top:5% !important; left:0 !important; right:0 !important; margin: 0 auto; padding: 0; background: #FFF; z-index:30000 !important; border-radius:25px; overflow-y:scroll; } .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; } .modal-content .con_title { font-size: 24px; letter-spacing: 0.15em; padding-bottom: 8px; text-align:center; position:relative; background:url(../imgs/other/color_red.gif) no-repeat center bottom; background-size:40px 2px; } .close_btn { position:absolute; right:40px; top:40px; } .modal_inner { width:100%; display:flex; justify-content:space-between; position:relative; } .modal_inner .photo { width:34%; } .modal_inner .photo img { width:100%; height:100%; object-fit:cover; display:block; /*border-radius:25px 0 0 25px;*/ } @media all and (-ms-high-contrast:none){ .modal_inner .photo img { width:100%; height:auto; display:block; } } .modal_inner .box { width:66%; padding:20px 40px; } .modal_inner .box .logo { text-align:center; } .modal_inner .box .logo img { width:auto; display:block; margin:0 auto; } .modal_inner .box .logo_name { color:#707071; text-align:center; margin-top:40px; font-size:14px; padding-bottom:20px; border-bottom:2px solid #c8bb9b; } .point_box { margin-top:15px; width:100%; display:flex; flex-wrap:wrap; border:5px solid #e9508a; border-radius:5px; } .point_box .point_icon { padding:20px; width:30%; background:#e9508a; display:flex; } .point_box .point_icon img { width:80%; height:auto; display:block; margin:auto; } @media all and (-ms-high-contrast:none){ .point_box .point_icon img { width:148px !important; height:104px !important; display:block; margin:auto; } } .point_box p { width:70%; padding:20px; background:#FFF; font-size:18px; 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:20px; color:#604c3f; font-size:16px; font-weight:bold; display:flex; justify-content:space-between; align-items:center; } .modal_inner ul li p span { font-size:12px; } .more_btn { width:280px; margin:50px auto 0; } .more_btn span { cursor:pointer; } /*-------------------------------------------------- ************************************************** サイドバー ************************************************** --------------------------------------------------*/ /* -- なし -- */ /*-------------------------------------------------- ************************************************** フッター ************************************************** --------------------------------------------------*/ footer { width: 800px; margin:0 auto; padding: 40px 0; background: #FFF; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } footer ul { display:-webkit-box; display:-ms-flexbox; display:flex; } footer ul li { margin-left:20px; } #copyright { font-size:10px; color:#707070; } /*-------------------------------------------------- ************************************************** その他 (PageUpボタン 追従系 jsに関わるcssなど。) ************************************************** --------------------------------------------------*/ /* 上へ戻る */ .pagetop { padding-bottom:70px; display:block; width:40px; margin:0 auto; } .pagetop img { display:block; width:100%; margin:0 auto; } .pagetop_after{ position: fixed; right: 50px; bottom: 100px; display:block; width:75px; height:75px; 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;} }