@charset "utf-8"; /* ========================================================= タイプ ： ホーム 更新日 ： 2017-06-29 ========================================================= */ /* イントロ画面 ========================================================= */ #introWindow { position: fixed; top: 0; left: 0; z-index: 20000; width: 100%; height: 100%; background-color: rgba(0,0,0,0.75); opacity: 0; } #introWindow #introWindowInner { position: relative; width: 100%; height: 100%; } #introWindow #introWindowInner #introWindowBoxWrap { position: absolute; top: 50%; left: 50%; z-index: 20200; width: 940px; height: 700px; background: url(/images/home_intro_bg.jpg) no-repeat left top; background-size: 970px 700px; margin-top: -350px; margin-left: -470px; background-color: #ffffff; opacity: 0; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox { position: relative; width: 940px; height: 700px; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowClose { position: absolute; top: -21px; right: -21px; width: 44px; height: 44px; border-radius: 22px; background-color: #ffffff; box-shadow: 2.6px 3px 7px 0px rgba(0, 0, 0, 0.4); cursor: pointer; -webkit-transition: 0.3s ease; transition: 0.3s ease; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowClose:before, #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowClose:after { position: absolute; top: 20px; left: 10px; display: block; width: 24px; height: 3px; background-color: #000000; content: ""; -webkit-transition: 0.3s ease; transition: 0.3s ease; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowClose:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowClose:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowClose:hover { background-color: #000000; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowClose:hover:before, #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowClose:hover:after { background-color: #ffffff; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowTitle { font-size: 2.8rem; line-height: 4.5rem; font-weight: 700; padding: 60px 0 50px 47px; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowTitle span { display: block; font-size: 2rem; line-height: 2.8rem; padding-left: 3px; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLogo { position: absolute; top: 50px; right: 50px; width: 81px; height: 79px; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLogo img { width: 100%; height: auto; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLead { text-align: center; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLead p { font-size: 2.6rem; line-height: 4.2rem; margin-bottom: 20px; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLead dl dt { font-size: 2.2rem; line-height: 2.8rem; font-weight: 700; margin-bottom: 6px; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLead dl dd { font-size: 1.8rem; line-height: 3.2rem; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLink { position: absolute; bottom: 80px; right: 0; left: 0; overflow: hidden; width: 520px; margin-right: auto; margin-left: auto; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLink #introWindowLink1, #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLink #introWindowLink2 { position: relative; width: 240px; background-color: #000000; box-sizing: border-box; border: solid 2px #000000; border-radius: 4px; font-size: 1.6rem; line-height: 2.4rem; color: #ffffff; text-align: center; padding: 12px; -webkit-transition: 0.3s ease; transition: 0.3s ease; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLink #introWindowLink1 { float: left; cursor: pointer; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLink #introWindowLink2 { float: right; display: block; text-decoration: none; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLink #introWindowLink1:after, #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLink #introWindowLink2:after { position: absolute; top: 17px; right: 16px; display: block; width: 12px; height: 12px; border-right: solid 1px #ffffff; border-bottom: solid 1px #ffffff; content: ""; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: 0.3s ease; transition: 0.3s ease; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLink #introWindowLink1:hover:after, #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLink #introWindowLink2:hover:after { border-color: #000000; } #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLink #introWindowLink1:hover, #introWindow #introWindowInner #introWindowBoxWrap #introWindowBox #introWindowLink #introWindowLink2:hover { background-color: #ffffff; color: #000000; } #introWindow #introWindowInner #introWindowBtn { position: absolute; top: 0; left: 0; z-index: 20100; width: 100%; height: 100%; background-color: rgba(0,0,0,0); } /* 1）HOME ========================================================= */ #home { background: #efefef; font-weight: 500; } #home #wrapper { min-width: 1200px; padding-top: 0; /*padding-top: 110px;*/ padding-right: 20px; padding-bottom: 5px; padding-left: 20px; margin-right: auto; margin-left: auto; font-size: 1.5rem; line-height: 2.2rem; } #home #wrapper p + p,#home #wrapper p + h2 { margin-top: 7px; } #home #wrapper h2 { font-size: 2.2rem; line-height: 3.2rem; font-weight: 500; } #home #wrapper h2 + p { margin-top: 15px; font-size: 1.3rem; line-height: 2.4rem; } .over { -webkit-transition: 0.2s ease; transition: 0.2s ease; } #area01 { width: 100%; height: 590px; margin-top: 20px; position: relative; display: block; } #area02,#area03,#area04,#area05,#area06 { width: 100%; height: 285px; margin-top: 20px; position: relative; display: block; } #area01 .a01box01 a { display: block; width: 100%; height: 100%; color: #222222; text-decoration: none; padding: 50px 40px 40px; box-sizing: border-box; background: url(/images/topboxarrow_b.png) no-repeat; background-size: 20px 20px; background-position: bottom 10px right 10px; } #area01 .a01box02 a,#area01 .a01box04 a { display: block; width: 100%; height: 100%; color: #222222; text-decoration: none; padding: 36px 30px; box-sizing: border-box; background: url(/images/topboxarrow_b.png) no-repeat; background-size: 20px 20px; background-position: bottom 10px right 10px; } #area01 .a01box01 a:hover,#area01 .a01box02 a:hover,#area01 .a01box04 a:hover { background-position: bottom 5px right 5px; } #area02 a,#area03 a,#area04 a,#area05 a,#area06 a { display: block; width: 100%; height: 100%; color: #222222; text-decoration: none; padding: 36px 30px; box-sizing: border-box; background: url(/images/topboxarrow_b.png) no-repeat; background-size: 20px 20px; background-position: bottom 10px right 10px; } #area02 a:hover,#area03 a:hover,#area04 a:hover,#area05 a:hover,#area06 a:hover { background-position: bottom 5px right 5px; } .textWhite { color: #ffffff!important; background: url(/images/topboxarrow_w.png) no-repeat!important; background-size: 20px 20px!important; background-position: bottom 10px right 10px!important; } a.textWhite:hover { background-position: bottom 5px right 5px!important; } .topNoLink { padding: 40px 30px; box-sizing: border-box; } /* TOP BANNER ========================================================= */ #topBanner { position: relative; padding-top: 130px; position: relative; } #topBanner .sliderMain { position: relative; overflow: hidden; } #topBanner .sliderMain ul { display: inline-block; } #topBanner .sliderMain ul li { position: relative; float: left; width: 1200px;!important height: 400px; } #topBanner .sliderMain ul li .mainInner { } #topBanner .sliderMain ul li .mainInner img:nth-child(1) { display: block; } #topBanner .sliderMain ul li .mainInner img:nth-child(2) { display: none; } #topBanner .sliderMain .mainBase, #topBanner .sliderMain .mainWrap { position: absolute; top: 0; } #topBanner .sliderMain .mainPrev, #topBanner .sliderMain .mainNext { position: absolute; top: 0; background: #ffffff; cursor: pointer; z-index: 2; } /* Area01 Box01 ------------------------------------------ */ #home #wrapper #area01 .a01box01 p.fieldBlack,#home #wrapper #area01 .a01box01 p.fieldRed,#home #wrapper #area01 .a01box01 p.fieldGreen,#home #wrapper #area01 .a01box01 p.fieldOrenge,#home #wrapper #area01 .a01box01 p.fieldYellow { top: -13px; } #home #wrapper #area01 .a01box01 p + p { font-size: 1.8rem; line-height: 3.2rem; font-weight: 700; margin-top: 0; } #home #wrapper #area01 .a01box01 h2 { font-size: 4.4rem; line-height: 6.3rem; font-weight: 700; margin-top: -8px; } #home #wrapper #area01 .a01box01 h2 + p { font-size: 1.5rem; line-height: 2.8rem; font-weight: 500; margin-top: 8px; } /* bio system net. ------------------------------------------ */ #home #wrapper .bioSystemNet { padding-top: 91px; } #home #wrapper .bioSystemNet h2 { font-size: 3.2rem; line-height: 4.2rem; font-weight: 400; text-align: center; } #home #wrapper .bioSystemNet h2 + p { margin-top: 8px; } #home #wrapper .bioSystemNet p { font-size: 1.4rem; line-height: 2.8rem; text-align: center; } /* H2 size ------------------------------------------ */ #home #wrapper h2.size20 { font-size: 2.0rem; } #home #wrapper h2.size21 { font-size: 2.1rem; } #home #wrapper h2.size23 { font-size: 2.3rem; } #home #wrapper h2.size24 { font-size: 2.4rem; } #home #wrapper h2.size25 { font-size: 2.5rem; } #home #wrapper h2.size26 { font-size: 2.6rem; } #home #wrapper h2.size30 { font-size: 3.0rem; } /* label ------------------------------------------ */ #home #wrapper p.fieldBlack { display: inline-block; position: relative; top: -9px; background-color: #030000; border-radius: 2px; height: 24px; padding: 0 15px; text-align: center; font-size: 1.3rem; line-height: 2.4rem; color: #ffffff; } #home #wrapper p.fieldRed { display: inline-block; position: relative; top: -9px; background-color: #c7425b; border-radius: 2px; height: 24px; padding: 0 15px; text-align: center; font-size: 1.3rem; line-height: 2.4rem; color: #ffffff; } #home #wrapper p.fieldGreen { display: inline-block; position: relative; top: -9px; background-color: #257a31; border-radius: 2px; height: 24px; padding: 0 15px; text-align: center; font-size: 1.3rem; line-height: 2.4rem; color: #ffffff; } #home #wrapper p.fieldOrange { display: inline-block; position: relative; top: -9px; background-color: #db6d1f; border-radius: 2px; height: 24px; padding: 0 15px; text-align: center; font-size: 1.3rem; line-height: 2.4rem; color: #ffffff; } #home #wrapper p.fieldYellow { display: inline-block; position: relative; top: -9px; background-color: #f2f02f; border-radius: 2px; height: 24px; padding: 0 15px; text-align: center; font-size: 1.3rem; line-height: 2.4rem; color: #000000; } /* OutLink ------------------------------------------ */ #home #wrapper .outLink h2 { display: inline-block; padding-right: 27px; } #home #wrapper .outLink h2:before { position: absolute; top: 15px; right: 8px; display: block; width: 9px; height: 9px; box-sizing: border-box; border-bottom: solid 1px #222222; border-left: solid 1px #222222; content: ""; } #home #wrapper .outLink h2:after { position: absolute; top: 9px; right: 1px; display: block; width: 13px; height: 12px; box-sizing: border-box; border: solid 1px #222222; content: ""; } #home #wrapper .outLinkW h2:before { border-bottom: solid 1px #ffffff; border-left: solid 1px #ffffff; } #home #wrapper .outLinkW h2:after { border: solid 1px #ffffff; content: ""; } #home #wrapper #area01 .a01box02 h2:before,#home #wrapper #area01 .a01box02 h2:after { display: none; } /* footerMenu ------------------------------------------ */ #home footer { background-color: #ffffff; color: #222222; } #home footer #footerArea #footerMenu a { color: #222222; } #home footer #footerArea #footerMenu a:after { background-color: #222222; } /* Area ------------------------------------------ */ #home #wrapper #area01 .a01box01 { display: block; position: absolute; top: 0; left: 0; width: 590px; height: 590px; } #home #wrapper #area01 .a01box02 { display: block; position: absolute; top: 0; left: 610px; width: 285px; height: 285px; } #home #wrapper #area01 .a01box03 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 285px; padding: 23px 30px; color: #ffffff; background: #3c85bc; box-sizing: border-box; } #home #wrapper #area01 .a01box03 h2 { font-size: 2rem; font-weight: 500; margin-bottom: 14px; } #home #wrapper #area01 .a01box03 .bxslider1 a { color: #ffffff; text-decoration: none; display: block; width: 100%; height: 100%; } #home #wrapper #area01 .a01box04 { display: block; position: absolute; top: 305px; left: 610px; width: 285px; height: 285px; } #home #wrapper #area01 .a01box05 { display: block; position: absolute; top: 305px; left: 915px; width: 285px; height: 285px; padding: 23px 30px; color: #ffffff; background: #3c85bc; box-sizing: border-box; } #home #wrapper #area01 .a01box05 h2 { font-size: 20px; font-weight: 500; margin-bottom: 14px; } #home #wrapper #area01 .a01box05 .bxslider2 a { color: #ffffff; text-decoration: none; display: block; width: 100%; height: 100%; } #patternA #area02 .a02box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 285px; } #patternA #area02 .a02box02 { display: block; position: absolute; top: 0; left: 305px; width: 590px; height: 285px; } #patternA #area02 .a02box03 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 285px; } #patternA #area03 .a03box01 { display: block; position: absolute; top: 0; left: 0; width: 590px; height: 285px; } #patternA #area03 .a03box02 { display: block; position: absolute; top: 0; left: 610px; width: 285px; height: 285px; } #patternA #area03 .a03box03 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 285px; } #patternB #area02 .a02box01 { display: block; position: absolute; top: 0; left: 0; width: 590px; height: 285px; } #patternB #area02 .a02box02 { display: block; position: absolute; top: 0; left: 610px; width: 285px; height: 285px; } #patternB #area02 .a02box03 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 285px; } #patternB #area03 .a03box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 285px; } #patternB #area03 .a03box02 { display: block; position: absolute; top: 0; left: 305px; width: 590px; height: 285px; } #patternB #area03 .a03box03 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 285px; } #patternC #area02 .a02box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 285px; } #patternC #area02 .a02box02 { display: block; position: absolute; top: 0; left: 305px; width: 285px; height: 285px; } #patternC #area02 .a02box03 { display: block; position: absolute; top: 0; left: 610px; width: 590px; height: 285px; } #patternC #area03 .a03box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 285px; } #patternC #area03 .a03box02 { display: block; position: absolute; top: 0; left: 305px; width: 590px; height: 285px; } #patternC #area03 .a03box03 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 285px; } #patternD #area02 .a02box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 285px; } #patternD #area02 .a02box02 { display: block; position: absolute; top: 0; left: 305px; width: 590px; height: 285px; } #patternD #area02 .a02box03 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 285px; } #patternD #area03 .a03box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 285px; } #patternD #area03 .a03box02 { display: block; position: absolute; top: 0; left: 305px; width: 285px; height: 285px; } #patternD #area03 .a03box03 { display: block; position: absolute; top: 0; left: 610px; width: 590px; height: 285px; } #pattern2A #area04 .a04box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 285px; } #pattern2A #area04 .a04box02 { display: block; position: absolute; top: 0; left: 305px; width: 285px; height: 285px; } #pattern2A #area04 .a04box03 { display: block; position: absolute; top: 0; left: 610px; width: 285px; height: 285px; } #pattern2A #area04 .a04box04 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 132px; } #pattern2A #area04 .a04box05 { display: block; position: absolute; top: 153px; left: 915px; width: 285px; height: 132px; } #pattern2A #area04 .a04box06 { display: none; } #pattern2A #area05 .a05box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 285px; } #pattern2A #area05 .a05box02 { display: block; position: absolute; top: 0; left: 305px; width: 285px; height: 132px; } #pattern2A #area05 .a05box03 { display: block; position: absolute; top: 0; left: 610px; width: 285px; height: 132px; } #pattern2A #area05 .a05box04 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 285px; } #pattern2A #area05 .a05box05 { display: block; position: absolute; top: 153px; left: 305px; width: 285px; height: 132px; } #pattern2A #area05 .a05box06 { display: block; position: absolute; top: 153px; left: 610px; width: 285px; height: 132px; } #pattern2A #area04 .a04box04,#pattern2A #area04 .a04box05, #pattern2A #area05 .a05box02,#pattern2A #area05 .a05box03,#pattern2A #area05 .a05box05,#pattern2A #area05 .a05box06 { background-image: none!important; } #pattern2A #area04 .a04box04 h2,#pattern2A #area04 .a04box05 h2, #pattern2A #area05 .a05box02 h2,#pattern2A #area05 .a05box03 h2,#pattern2A #area05 .a05box05 h2,#pattern2A #area05 .a05box06 h2 { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #pattern2A #area04 .a04box04 p,#pattern2A #area04 .a04box05 p, #pattern2A #area05 .a05box02 p,#pattern2A #area05 .a05box03 p,#pattern2A #area05 .a05box05 p,#pattern2A #area05 .a05box06 p { display: none; } #pattern2B #area04 .a04box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 132px; } #pattern2B #area04 .a04box02 { display: block; position: absolute; top: 0; left: 305px; width: 285px; height: 285px; } #pattern2B #area04 .a04box03 { display: block; position: absolute; top: 0; left: 610px; width: 285px; height: 132px; } #pattern2B #area04 .a04box04 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 285px; } #pattern2B #area04 .a04box05 { display: block; position: absolute; top: 153px; left: 0; width: 285px; height: 132px; } #pattern2B #area04 .a04box06 { display: block; position: absolute; top: 153px; left: 610px; width: 285px; height: 132px; } #pattern2B #area05 .a05box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 285px; } #pattern2B #area05 .a05box02 { display: block; position: absolute; top: 0; left: 305px; width: 285px; height: 132px; } #pattern2B #area05 .a05box03 { display: block; position: absolute; top: 0; left: 610px; width: 285px; height: 285px; } #pattern2B #area05 .a05box04 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 132px; } #pattern2B #area05 .a05box05 { display: block; position: absolute; top: 153px; left: 305px; width: 285px; height: 132px; } #pattern2B #area05 .a05box06 { display: block; position: absolute; top: 153px; left: 915px; width: 285px; height: 132px; } #pattern2B #area04 .a04box01,#pattern2B #area04 .a04box03,#pattern2B #area04 .a04box05,#pattern2B #area04 .a04box06, #pattern2B #area05 .a05box02,#pattern2B #area05 .a05box04,#pattern2B #area05 .a05box05,#pattern2B #area05 .a05box06 { background-image: none!important; } #pattern2B #area04 .a04box01 h2,#pattern2B #area04 .a04box03 h2,#pattern2B #area04 .a04box05 h2,#pattern2B #area04 .a04box06 h2, #pattern2B #area05 .a05box02 h2,#pattern2B #area05 .a05box04 h2,#pattern2B #area05 .a05box05 h2,#pattern2B #area05 .a05box06 h2 { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #pattern2B #area04 .a04box01 p,#pattern2B #area04 .a04box03 p,#pattern2B #area04 .a04box05 p,#pattern2B #area04 .a04box06 p, #pattern2B #area05 .a05box02 p,#pattern2B #area05 .a05box04 p,#pattern2B #area05 .a05box05 p,#pattern2B #area05 .a05box06 p { display: none; } #pattern2C #area04 .a04box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 285px; } #pattern2C #area04 .a04box02 { display: block; position: absolute; top: 0; left: 305px; width: 285px; height: 132px; } #pattern2C #area04 .a04box03 { display: block; position: absolute; top: 0; left: 610px; width: 285px; height: 285px; } #pattern2C #area04 .a04box04 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 285px; } #pattern2C #area04 .a04box05 { display: block; position: absolute; top: 153px; left: 305px; width: 285px; height: 132px; } #pattern2C #area04 .a04box06 { display: none; } #pattern2C #area05 .a05box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 285px; } #pattern2C #area05 .a05box02 { display: block; position: absolute; top: 0; left: 305px; width: 285px; height: 285px; } #pattern2C #area05 .a05box03 { display: block; position: absolute; top: 0; left: 610px; width: 285px; height: 132px; } #pattern2C #area05 .a05box04 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 132px; } #pattern2C #area05 .a05box05 { display: block; position: absolute; top: 153px; left: 610px; width: 285px; height: 132px; } #pattern2C #area05 .a05box06 { display: block; position: absolute; top: 153px; left: 915px; width: 285px; height: 132px; } #pattern2C #area04 .a04box02,#pattern2C #area04 .a04box05, #pattern2C #area05 .a05box03,#pattern2C #area05 .a05box04,#pattern2C #area05 .a05box05,#pattern2C #area05 .a05box06 { background-image: none!important; } #pattern2C #area04 .a04box02 h2,#pattern2C #area04 .a04box05 h2, #pattern2C #area05 .a05box03 h2,#pattern2C #area05 .a05box04 h2,#pattern2C #area05 .a05box05 h2,#pattern2C #area05 .a05box06 h2 { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #pattern2C #area04 .a04box02 p,#pattern2C #area04 .a04box05 p, #pattern2C #area05 .a05box03 p,#pattern2C #area05 .a05box04 p,#pattern2C #area05 .a05box05 p,#pattern2C #area05 .a05box06 p { display: none; } #pattern2D #area04 .a04box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 132px; } #pattern2D #area04 .a04box02 { display: block; position: absolute; top: 0; left: 305px; width: 285px; height: 285px; } #pattern2D #area04 .a04box03 { display: block; position: absolute; top: 0; left: 610px; width: 285px; height: 285px; } #pattern2D #area04 .a04box04 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 285px; } #pattern2D #area04 .a04box05 { display: block; position: absolute; top: 153px; left: 0; width: 285px; height: 132px; } #pattern2D #area04 .a04box06 { display: none; } #pattern2D #area05 .a05box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 285px; } #pattern2D #area05 .a05box02 { display: block; position: absolute; top: 0; left: 305px; width: 285px; height: 132px; } #pattern2D #area05 .a05box03 { display: block; position: absolute; top: 0; left: 610px; width: 285px; height: 285px; } #pattern2D #area05 .a05box04 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 132px; } #pattern2D #area05 .a05box05 { display: block; position: absolute; top: 153px; left: 305px; width: 285px; height: 132px; } #pattern2D #area05 .a05box06 { display: block; position: absolute; top: 153px; left: 915px; width: 285px; height: 132px; } #pattern2D #area04 .a04box01,#pattern2D #area04 .a04box05, #pattern2D #area05 .a05box02,#pattern2D #area05 .a05box04,#pattern2D #area05 .a05box05,#pattern2D #area05 .a05box06 { background-image: none!important; } #pattern2D #area04 .a04box01 h2,#pattern2D #area04 .a04box05 h2, #pattern2D #area05 .a05box02 h2,#pattern2D #area05 .a05box04 h2,#pattern2D #area05 .a05box05 h2,#pattern2D #area05 .a05box06 h2 { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #pattern2D #area04 .a04box01 p,#pattern2D #area04 .a04box05 p, #pattern2D #area05 .a05box02 p,#pattern2D #area05 .a05box04 p,#pattern2D #area05 .a05box05 p,#pattern2D #area05 .a05box06 p { display: none; } #area06 { margin-bottom: 20px; } #pattern3A #area06 .a06box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 132px; } #pattern3A #area06 .a06box02 { display: block; position: absolute; top: 0; left: 305px; width: 285px; height: 285px; } #pattern3A #area06 .a06box03 { display: block; position: absolute; top: 0; left: 610px; width: 285px; height: 132px; } #pattern3A #area06 .a06box04 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 285px; } #pattern3A #area06 .a06box05 { display: block; position: absolute; top: 153px; left: 0; width: 285px; height: 132px; } #pattern3A #area06 .a06box06 { display: block; position: absolute; top: 153px; left: 610px; width: 285px; height: 132px; } #pattern3A #area06 .a06box01,#pattern3A #area06 .a06box03,#pattern3A #area06 .a06box05,#pattern3A #area06 .a06box06 { background-image: none!important; } #pattern3A #area06 .a06box01 h2,#pattern3A #area06 .a06box03 h2,#pattern3A #area06 .a06box05 h2,#pattern3A #area06 .a06box06 h2 { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #pattern3A #area06 .a06box01 p,#pattern3A #area06 .a06box03 p,#pattern3A #area06 .a06box05 p,#pattern3A #area06 .a06box06 p { display: none; } #pattern3B #area06 .a06box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 285px; } #pattern3B #area06 .a06box02 { display: block; position: absolute; top: 0; left: 305px; width: 285px; height: 132px; } #pattern3B #area06 .a06box03 { display: block; position: absolute; top: 0; left: 610px; width: 285px; height: 285px; } #pattern3B #area06 .a06box04 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 132px; } #pattern3B #area06 .a06box05 { display: block; position: absolute; top: 153px; left: 305px; width: 285px; height: 132px; } #pattern3B #area06 .a06box06 { display: block; position: absolute; top: 153px; left: 915px; width: 285px; height: 132px; } #pattern3B #area06 .a06box02,#pattern3B #area06 .a06box04,#pattern3B #area06 .a06box05,#pattern3B #area06 .a06box06 { background-image: none!important; } #pattern3B #area06 .a06box02 h2,#pattern3B #area06 .a06box04 h2,#pattern3B #area06 .a06box05 h2,#pattern3B #area06 .a06box06 h2 { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #pattern3B #area06 .a06box02 p,#pattern3B #area06 .a06box04 p,#pattern3B #area06 .a06box05 p,#pattern3B #area06 .a06box06 p { display: none; } #pattern3C #area06 .a06box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 285px; } #pattern3C #area06 .a06box02 { display: block; position: absolute; top: 0; left: 305px; width: 285px; height: 285px; } #pattern3C #area06 .a06box03 { display: block; position: absolute; top: 0; left: 610px; width: 285px; height: 132px; } #pattern3C #area06 .a06box04 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 132px; } #pattern3C #area06 .a06box05 { display: block; position: absolute; top: 153px; left: 610px; width: 285px; height: 132px; } #pattern3C #area06 .a06box06 { display: block; position: absolute; top: 153px; left: 915px; width: 285px; height: 132px; } #pattern3C #area06 .a06box03,#pattern3C #area06 .a06box04,#pattern3C #area06 .a06box05,#pattern3C #area06 .a06box06 { background-image: none!important; } #pattern3C #area06 .a06box03 h2,#pattern3C #area06 .a06box04 h2,#pattern3C #area06 .a06box05 h2,#pattern3C #area06 .a06box06 h2 { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #pattern3C #area06 .a06box03 p,#pattern3C #area06 .a06box04 p,#pattern3C #area06 .a06box05 p,#pattern3C #area06 .a06box06 p { display: none; } #pattern3D #area06 .a06box01 { display: block; position: absolute; top: 0; left: 0; width: 285px; height: 285px; } #pattern3D #area06 .a06box02 { display: block; position: absolute; top: 0; left: 305px; width: 285px; height: 132px; } #pattern3D #area06 .a06box03 { display: block; position: absolute; top: 0; left: 610px; width: 285px; height: 132px; } #pattern3D #area06 .a06box04 { display: block; position: absolute; top: 0; left: 915px; width: 285px; height: 285px; } #pattern3D #area06 .a06box05 { display: block; position: absolute; top: 153px; left: 305px; width: 285px; height: 132px; } #pattern3D #area06 .a06box06 { display: block; position: absolute; top: 153px; left: 610px; width: 285px; height: 132px; } #pattern3D #area06 .a06box02,#pattern3D #area06 .a06box03,#pattern3D #area06 .a06box05,#pattern3D #area06 .a06box06 { background-image: none!important; } #pattern3D #area06 .a06box02 h2,#pattern3D #area06 .a06box03 h2,#pattern3D #area06 .a06box05 h2,#pattern3D #area06 .a06box06 h2 { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #pattern3D #area06 .a06box02 p,#pattern3D #area06 .a06box03 p,#pattern3D #area06 .a06box05 p,#pattern3D #area06 .a06box06 p { display: none; } /* サイトマップ ========================================================= */ #homeSitemap { overflow: hidden; width: 1200px; box-sizing: border-box; border-top: solid 1px #333333; line-height: 2.2rem; padding: 57px 20px 55px; margin-right: auto; margin-left: auto; } #homeSitemap a { color: #222222; text-decoration: none; } #homeSitemap .hsColumn { float: left; width: 550px; padding-right: 30px; } #homeSitemap .hlHsTitle1 { font-size: 1.7rem; font-weight: 700; margin-bottom: 20px; } #homeSitemap .hlHsTitle1:not(:first-child) { margin-top: 52px; } #homeSitemap .hlHsTitle2 { font-size: 1.6rem; font-weight: 500; margin-bottom: 12px; } #homeSitemap .hlHsTitle2:not(:first-child) { margin-top: 27px; } #homeSitemap ul li:not(:last-child) { margin-bottom: 10px; } #homeSitemap ul li a { position: relative; display: block; font-size: 1.5rem; padding-left: 22px; } #homeSitemap ul li a:before { position: absolute; top: 7px; left: 4px; display: block; width: 6px; height: 6px; border-right: solid 1px #222222; border-bottom: solid 1px #222222; content: ""; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: 0.2s ease; transition: 0.2s ease; } body.deviceAd #homeSitemap ul li a:before { top: 8px; } #homeSitemap ul li a:hover:before { left: 8px; } #homeSitemap ul li a span { font-size: 1.2rem; color: #8c8c8c; padding-left: 22px; }