@charset "UTF-8"; /* CSS Document */ /*=================================================== トップページ専用CSS(スマホ版) ===================================================*/ /*////////////////////////////////////////////////// 共通パーツ ///////////////////////////////////////////////////*/ /* ページャー */ .pager a { border-radius: 7px; width: 14px; height: 14px; -webkit-transition: none; transition: none; } /*////////////////////////////////////////////////// main ///////////////////////////////////////////////////*/ /* -------------------------------------------------------- キービジュアル -------------------------------------------------------- */ #keyv { min-width: 100%; height: 350px; } #keyv .caroufredsel_wrapper > div { height: 350px !important; } #keyv #carousel li { height: 350px; } #keyv .pager { padding-bottom: 5px; } /* ビジュアル1 */ #carousel .mainTxtBase span.mainTxt { font-size: 24px; } #carousel .mainTxtBase span.mainTxt span { display: block; } /* スペシャルとイベントの青ボタン */ #carousel li.sp .blueBtn, #carousel li.event .blueBtn { width: 125px; height: 30px; font-size: 12px; } /* スペシャル */ #carousel li.sp .inner, #carousel li.sp .inner > div { width: 100%; height: 100%; float: none; } #carousel li.sp .contArea { padding: 200px 10px 0; } #carousel li.sp .contArea h2 { font-size: 20px; margin-bottom: 0; } #carousel li.sp .contArea h2 + p { display: none; } #carousel li.sp .inner .bgImg { height: 180px; position: absolute; top: 0; overflow: hidden; } #carousel li.sp .inner .bgImg img { position: absolute; width: 100%; height: auto; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -37%, 0); transform: translate3d(-50%, -37%, 0); } #carousel li.sp .contArea .blueBtn { left: 10px; bottom: 30px; } /* イベント */ #carousel li.event .inner, #carousel li.event .eventData { width: 100%; height: 98%; padding: 20px; } #carousel li.event .eventData { padding: 15px 10px; } #carousel li.event .eventData .series { font-size: 12px; line-height: 1.3; } #carousel li.event .eventData h2 { font-size: 18px; margin: 12px 0; line-height: 1.3; } #carousel li.event .eventData .evTxt { font-size: 12px; line-height: 1.75; } #carousel li.event .eventData .detail { display: none; } #carousel li.event .eventData .blueBtn { left: 10px; bottom: 15px; } /* 前へ&次へ */ #keyv .prev, #keyv .next { display: none !important; } /* -------------------------------------------------------- 独立コンテンツ -------------------------------------------------------- */ #main { padding: 0; } #main > section { padding: 30px 10px 40px; } /* -------------------------------------------------------- 見出し -------------------------------------------------------- */ #main h2 { font-size: 33px; } #main h2 span { font-size: 12px; } #main h2 + p { text-align: left; } /* -------------------------------------------------------- news -------------------------------------------------------- */ #news .newsList { padding-bottom: 40px; } #news .newsList h3, #news .newsList dl, #news .newsList dt { width: 100%; max-width: 100%; float: none; } #news .newsList h3 { margin-bottom: 10px; } #news .newsList dd { padding: 0 ; } #news .newsList > p { bottom: 15px; } /* -------------------------------------------------------- business -------------------------------------------------------- */ #business .bsMenu { width: 100%; max-width: 600px; } #business .bsMenu li { width: 50%; min-width: 150px; height: auto; position: relative; } #business .bsMenu li:before { content: ""; display: block; padding-top: 93%; } #business .bsMenu li .inBox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #business .bsMenu li *:not(img), #business .bsMenu li a:hover > * { -webkit-transition: none; transition: none; } #business .bsMenu li:after, #business .bsMenu li:after, #business .bsMenu li p, #business .bsMenu li h3 span + span { display: none; } #business .bsMenu li h3 { width: 100%; position: absolute; top: 50%; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4); font-size: 20px; } #business .bsMenu li h3, #business .bsMenu li a:hover h3 { -webkit-transform: translate(0,-50%); transform: translate(0,-50%); } #business .bsMenu li a:hover h3 span { -webkit-opacity: 1; opacity: 1; } #business .bsMenu li img { width: 100%; top: 50%; left: 0; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); } /* -------------------------------------------------------- feature -------------------------------------------------------- */ #main > section#feature { padding-bottom: 105px; } #feat li { -webkit-transition: none; transition: none; } #feat li:hover { -webkit-opacity: 1; opacity: 1; } #feature .inner, #feature .caroufredsel_wrapper > div { width: 300px !important; margin: auto !important; } #feature .prev{ left: 0; } #feature .next{ right: 0; } #feature .pager { display: block !important; bottom: auto; margin-top: 25px; } #feature .pager.hide { display: none !important; } #feature .pager a { border-color: #D8D8D8; background-color: #FFF; margin-left: 10px; } #feature .pager a:first-child { margin-left: 0; } #feature .pager a:hover, #feature .pager a.selected { background-color: #D8D8D8; } #feature .prev, #feature .next { top: auto; margin-top: 20px; } /* -------------------------------------------------------- レポート -------------------------------------------------------- */ #report .inner .box { width: 100%; height: auto; padding: 170px 0 20px; float: none; } #report .inner .box > a:hover { text-decoration: none; } #report .inner .box a div { height: 150px; overflow: hidden; } #report .inner .box:first-child { margin: 0 0 30px; } #report .inner .box h3 { margin: 0 20px 15px; } #report .inner .box > a + p { margin: 0 20px; } #report .inner ul { margin-left: 20px; } #report .inner li { padding: 0 15px; } /* -------------------------------------------------------- バナー -------------------------------------------------------- */ #bnr { padding: 45px 0 15px; } #bnr ul { display: inline-block; margin-right: -10px; } #bnr ul li { width: 145px; margin-right: 10px; -webkit-transition: none; transition: none; } #bnr ul li:hover { -webkit-opacity: 1; opacity: 1; } #bnr ul:first-child li { margin-bottom: 10px; } @media (max-width: 474px) { #bnr ul { width: 310px; } } @media (min-width: 475px) and (max-width: 619px) { #bnr ul { width: 465px; } } @media (min-width: 620px) and (max-width: 770px) { #bnr ul { width: 620px; } } #bnr ul + ul { margin-top: 10px; }