@charset "UTF-8"; @media screen and (max-width: 750px) { /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ベーススタイル ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ img { width:100%; } /*------------------------------ float -------------------------------*/ #contentsWrap .fLeft { float:none !important; } #contentsWrap .fRight { float:none !important; } /*------------------------------ display -------------------------------*/ .pcDisplayBlock { display:inline !important; } .spDisplayBlock { display:block !important; } /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- コンテンツレイアウト ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #headerWrap */ #headerWrap { width:100%; margin:0 auto; position:relative; } #headerWrap h1 { width:70%; margin:0 4%; text-align:left; } #headerWrap p#spMenuBtn { display:block; position:absolute; right:6%; top:35%; width:7%; } #headerWrap ul { display:none; width:100%; position:absolute; margin-top:0; padding-bottom:15px; background:url(/bjt/nipponnokaisha/images/spmenu_bg.png) repeat-x left bottom; } #headerWrap ul li { width:94%; float:none; padding:0 3%; background:#ffffff; } #headerWrap ul li a { background:none; padding:12px 0 10px; border-top:solid 1px #cdcdcd; } #headerWrap ul li:first-child a { border-top:none; } #headerWrap ul li a span { display:block; background-position:98% center; } /* #contentsWrap */ #contentsWrap .contentOuter { width:94%; padding:40px 0; } #contentsWrap .contentsSection { min-width:initial; min-width:auto; } #contentsWrap .contentsSection h2 { width:40%; margin:0 auto; } #contentsWrap .contentsSection h2 + p { margin-top:20px; font-size:113%; } /* #footerWrap */ #footerWrap { width:94%; margin:0 auto; min-width:initial; min-width:auto; padding:20px 0; } #footerWrap p { font-size:67%; } #footerWrap p#footerLogo { margin:15px auto 0; width:65%; } #footerWrap p#pagetopBtn { width:11%; bottom:1%; right:4%; } /*------------------------------ About -------------------------------*/ #contentsWrap #aboutSection { margin-top:5px; } #contentsWrap #aboutSection #cartoonArea { background:none; padding:40px 0; } #contentsWrap #aboutSection #cartoonArea .contentOuter { width:94%; margin:0 auto; } /* #aboutUsInner */ #contentsWrap #aboutSection #cartoonArea #aboutUsInner { margin-top:20px; } #contentsWrap #aboutSection #cartoonArea #aboutUsInner .contentOuter { background:url(/bjt/nipponnokaisha/images/about_bg02_sp.png) no-repeat center bottom / contain; width:94%; padding-bottom:35%; min-width:initial; min-width:auto; } #contentsWrap #aboutSection #cartoonArea #aboutUsInner p { margin-top:25px; width:100%; font-size:100%; line-height:1.7em; } /* #purposeInner */ #contentsWrap #aboutSection #cartoonArea #purposeInner { margin-top:45px; } #contentsWrap #aboutSection #cartoonArea #purposeInner p { margin-top:25px; font-size:100%; } #contentsWrap #aboutSection #cartoonArea #purposeInner ul { margin-top:15px; width:100%; } #contentsWrap #aboutSection #cartoonArea #purposeInner ul li { background:url(/bjt/nipponnokaisha/images/about_icon_circle_sp.png) no-repeat left 0.2em / 1em; padding-left:1.2em; display:inline-block; margin-top:5px; font-size:113%; } #contentsWrap #aboutSection #cartoonArea #purposeInner ul li:first-child { margin-top:0; } #contentsWrap #aboutSection #cartoonArea #purposeInner p#purposeTxt { margin:25px 0 0; } /* #consistInner */ #contentsWrap #aboutSection #cartoonArea #consistInner { margin-top:45px; width:100%; } #contentsWrap #aboutSection #cartoonArea #consistInner .contentOuter { width:94%; margin:0 auto; } #contentsWrap #aboutSection #cartoonArea #consistInner #consistSlideBox { margin-top:10px; } #contentsWrap #aboutSection #cartoonArea #consistInner #consistSlideBox ul#consistArrowsList li { width:5%; top:45%; } #contentsWrap #aboutSection #cartoonArea #consistInner ul#consistNaviList { margin-top:10px; text-align:center; } #contentsWrap #aboutSection #cartoonArea #consistInner ul#consistNaviList li { margin:8px 0 0 2%; background:#ffffff; } #contentsWrap #aboutSection #cartoonArea #consistInner ul#consistNaviList li:first-child { margin:0; width:17%; } #contentsWrap #aboutSection #cartoonArea #consistInner ul#consistNaviList li:nth-child(2) { margin-top:0; width:32%; } #contentsWrap #aboutSection #cartoonArea #consistInner ul#consistNaviList li:nth-child(3) { margin-top:0; width:47%; } #contentsWrap #aboutSection #cartoonArea #consistInner ul#consistNaviList li:nth-child(4) { margin-left:0; width:40%; } #contentsWrap #aboutSection #cartoonArea #consistInner ul#consistNaviList li:nth-child(5) { width:30%; width:58%; } #contentsWrap #aboutSection #cartoonArea #consistInner ul#consistNaviList li.current { background:#ea5404; } /*------------------------------ Flow -------------------------------*/ #contentsWrap #flowSection ul { margin-top:15px; } #contentsWrap #flowSection ul li { margin:35px 0 0; width:100%; float:none; } #contentsWrap #flowSection ul li div { height:auto; padding:2% 0 36%; font-size:127%; } #contentsWrap #flowSection ul li div p { padding-left:1.2em; } #contentsWrap #flowSection ul li p.flowListTxt { margin-top:0; } #contentsWrap #flowSection ul li p.flowBtnMovie { margin:15px auto 0; width:62%; } #contentsWrap #flowSection ul li#flowList01 { margin:0; } #contentsWrap #flowSection ul li#flowList01 div { background:url(/bjt/nipponnokaisha/images/flow_bg01_sp.gif) no-repeat right bottom / contain; } #contentsWrap #flowSection ul li#flowList01 div p { background:url(/bjt/nipponnokaisha/images/flow_icon01_sp.png) no-repeat left center / 1em; } #contentsWrap #flowSection ul li#flowList02 { margin-top:35px; } #contentsWrap #flowSection ul li#flowList02 div { background:url(/bjt/nipponnokaisha/images/flow_bg02_sp.gif) no-repeat right bottom / contain; } #contentsWrap #flowSection ul li#flowList02 div p { background:url(/bjt/nipponnokaisha/images/flow_icon02_sp.png) no-repeat left center / 1em; } #contentsWrap #flowSection ul li#flowList03 div { background:url(/bjt/nipponnokaisha/images/flow_bg03_sp.gif) no-repeat right bottom / contain; } #contentsWrap #flowSection ul li#flowList03 div p { background:url(/bjt/nipponnokaisha/images/flow_icon03_sp.png) no-repeat left center / 1em; } #contentsWrap #flowSection ul li#flowList04 div { background:url(/bjt/nipponnokaisha/images/flow_bg04_sp.gif) no-repeat right bottom / contain; } #contentsWrap #flowSection ul li#flowList04 div p { background:url(/bjt/nipponnokaisha/images/flow_icon04_sp.png) no-repeat left center / 1em; } #contentsWrap #flowSection ul li#flowList05 div { background:url(/bjt/nipponnokaisha/images/flow_bg05_sp.gif) no-repeat right bottom / contain; } #contentsWrap #flowSection ul li#flowList05 div p { background:url(/bjt/nipponnokaisha/images/flow_icon05_sp.png) no-repeat left center / 1em; } #contentsWrap #flowSection ul li#flowList06 div { background:url(/bjt/nipponnokaisha/images/flow_bg06_sp.gif) no-repeat right bottom / contain; } #contentsWrap #flowSection ul li#flowList06 div p { background:url(/bjt/nipponnokaisha/images/flow_icon06_sp.png) no-repeat left center / 1em; } #contentsWrap #flowSection ul li#flowList01 div { background-size:contain; } #contentsWrap #flowSection ul li#flowList02 div { background-size:contain; } #contentsWrap #flowSection ul li#flowList03 div { background-size:contain; } #contentsWrap #flowSection ul li#flowList04 div { background-size:contain; } #contentsWrap #flowSection ul li#flowList05 div { background-size:contain; } #contentsWrap #flowSection ul li#flowList06 div { background-size:contain; } #contentsWrap #flowSection dl { margin-top:10px; background:url(/bjt/nipponnokaisha/images/flow_bg_movie_sp.gif) no-repeat top center / 100%; padding:12% 0 6%; } #contentsWrap #flowSection dl dd { margin:10px auto 0; width:62%; } #contentsWrap #flowSection dl dd a.btnWin { border-radius:10px; } /* fancybox */ #fancybox-wrap { width:90% !important; left:0 !important; right:0; padding:0 !important; margin:0 auto; transform:translateY(-50%); } #fancybox-content { width:100% !important; height:100% !important; padding-top:56.25%; } #fancybox-frame { position:absolute; left:0; top:0; } /*------------------------------ Voice -------------------------------*/ #contentsWrap #voiceSection ul { margin-top:20px; } #contentsWrap #voiceSection ul li { background:url(/bjt/nipponnokaisha/images/voice_bg_line_pc.png) repeat-x left top; margin-top:25px; padding-top:20px; } #contentsWrap #voiceSection ul li:first-child { margin-top:0; } #contentsWrap #voiceSection ul li > p { font-size:113%; } #contentsWrap #voiceSection ul li > div { margin-top:5px; } #contentsWrap #voiceSection ul li > div > p { width:42%; float:none; margin:0 auto; } #contentsWrap #voiceSection ul li div .infoArea { margin:15px 0 0; width:100%; float:none; } #contentsWrap #voiceSection ul li div .infoArea p.voiceTxt { margin-top:5px; } #contentsWrap #voiceSection ul li div .infoArea p.voiceBtn { margin:20px auto 0; width:62%; } #contentsWrap #voiceSection ul li div .infoArea p.voiceBtn a { padding:1% 0; } /*------------------------------ Sample -------------------------------*/ #contentsWrap #sampleSection #sampleArea > div { float:none; margin:20px 0 0; } #contentsWrap #sampleSection #sampleArea > p { width:70%; float:none; margin:20px auto !important; } #contentsWrap #sampleSection #sampleArea > p img { width:100%; } #contentsWrap #sampleSection #sampleArea h3 { font-size:124%; } #contentsWrap #sampleSection p.sampleBtn { margin:20px auto 0; width:62%; } #contentsWrap #sampleSection p.sampleBtn a { padding:1% 0; } /*------------------------------ Book -------------------------------*/ #contentsWrap #bookSection { width:100%; } #contentsWrap #bookSection #bookArea { margin-top:30px; } #contentsWrap #bookSection #bookArea > p { float:none; margin:0 auto; width:35%; } #contentsWrap #bookSection #bookArea > div { float:none; margin:20px 0 0; width:100%; } #contentsWrap #bookSection #bookArea div h3 { font-size:113%; text-align:center; } #contentsWrap #bookSection #bookArea div dl { margin:5px auto 0; width:96%; } #contentsWrap #bookSection #bookArea div dl dt { margin-top:0; width:15%; } #contentsWrap #bookSection #bookArea div dl dd { width:80%; margin:0; } #contentsWrap #bookSection #bookArea div p { margin-top:20px; } #contentsWrap #bookSection #bookArea div p#bookImg { margin-top:0; } #contentsWrap #bookSection p.bookBtn { margin:20px auto 0; width:62%; } #contentsWrap #bookSection p.bookBtn a { padding:1% 0; } /*------------------------------ Contact -------------------------------*/ #contentsWrap #contactSection ul { margin:15px auto 0; width:100%; } #contentsWrap #contactSection ul li { float:none; width:72%; margin:15px auto 0; font-size:100%; } #contentsWrap #contactSection ul li:first-child { margin:0 auto; } #contentsWrap #contactSection p#contactTxt { margin-top:25px; font-size:100%; } #contentsWrap #contactSection p#contactTell { margin-top:5px; font-size:140%; } #contentsWrap #contactSection p#contactAttention { margin-top:15px; font-size:86%; } }