/* ================================================================================== */ /* Common CSS */ /* ================================================================================== */ @import url('./ress.css'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@800&family=Roboto+Condensed:wght@700&display=swap'); /* ================================================================================== */ /* Common TAG */ /* ================================================================================== */ html{ width:100%; } body{ width:100%; height:100%; color:#111111; background-color:#ffffff; overflow-y:scroll; font-family:'BIZ UDPGothic',Meiryo,Helvetica,Arial,sans-serif; } div{ position:relative; } img{ display:block; width:100%; height:auto; } p{ line-height:200%; } .colorRed{ color: #dc1905;} .colorBlack{ color: #000000;} .colorBlue01{ color: #005aeb;} .colorYellow{ color: #fff658;} .fRobotoCon{ font-family:'Roboto Condensed',sans-serif; font-weight:700; } .fNotoSansB{ font-family:'Noto Sans JP',sans-serif; font-weight:800; } /*=================================================================== SP ===================================================================*/ @media( max-width:1023px ) { /* Common */ .sp{ display:block; } .pc{ display:none !important; } .indexHeadBlueLine{ display:block; width:100%; height:0.6rem; position:absolute; top:0; left:0; z-index:+10; background-color:#0087b4; } .indexHeader{ width:100%; background-color: #ffffff; z-index: 999; position: fixed; } .indexHeaderBox{ width: 95%; margin: auto; padding-top: 0.75rem;} .indexHeaderBox > div:nth-of-type(1){ width: 65%; } .indexHeaderBox > div:nth-of-type(1) > img{ } .indexHeaderBox > div:nth-of-type(2){ width: 100%; margin-top: 0.75rem; } .indexHeaderInner{ display: flex; flex-wrap: nowrap; justify-content: space-between; } .indexHeaderInner > div:nth-of-type(1){ width: 65%;} .indexHeaderInner > div:nth-of-type(1) > p:nth-of-type(1){ font-size: 0.75rem;line-height: 125%; } .indexHeaderInner > div:nth-of-type(1) > p:nth-of-type(2){ font-size: 2rem; font-weight:bold; line-height: 100%; margin-top: 0.25rem; } .indexHeaderInner > div:nth-of-type(1) > p:nth-of-type(2):before{ content: url("../../img/phoneIcon.svg"); display: inline-block; height: 1.25rem; width: 1.25rem; margin-right: 0.2rem; } .indexHeaderInner > div:nth-of-type(2){ width:35%; background-color:#ff6c00; border-radius: 0.5rem; } .indexHeaderInner > div:nth-of-type(2) > a{ display: block; text-decoration: none; } .indexHeaderInner > div:nth-of-type(2) > a > p{ font-size: 0.9rem; font-weight: bold; color:#ffffff; text-align: center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; } .indexHeaderColorBar{ width: 100%; height: 6px; background-color: #00aeeb; margin-top: 0.5rem; } .indexMainImgArea{ width:100%; height:95vh; background-image: url("../../img/mainImg_sp.jpg"); background-size:cover; background-position:top; } .indexMainImgAreaBox01{ width: 100%; height: 100%; } .indexMainImgAreaBox02{ max-width: 95vw; height:100%; display: flex; flex-wrap: nowrap; justify-content: space-between; padding-bottom: 8rem; margin: auto; align-items: flex-end; z-index: 997; } .indexMainImgAreaBox02 > div:nth-of-type(1){ width: 78%; padding: 0 1rem; background-color: rgba(255,255,255,0.7); border-radius: 1rem; } .indexMainImgAreaBox02 > div:nth-of-type(1) > p:nth-of-type(1){ font-size: 1.25rem; line-height: 150%; margin-top: 0.5rem; padding-top: 1rem; } .indexMainImgAreaBox02 > div:nth-of-type(1) > p:nth-of-type(2){ font-size: 2rem; line-height: 125%; } .indexMainImgAreaBox02 > div:nth-of-type(1) > p:nth-of-type(2) > span{ font-size: 1.75rem;} .indexMainImgAreaBox02 > div:nth-of-type(1) > p:nth-of-type(3){ font-size: 2rem; line-height: 125%; } .indexMainImgAreaBox02 > div:nth-of-type(1) > p:nth-of-type(4){ font-size: 1rem; line-height: 150%; margin-top: 0.5rem; padding-bottom: 1rem;} .indexMainImgAreaBox02 > div:nth-of-type(2){ width: 24%; margin-left: -1rem; } .indexMainImgAreaBox02 > div:nth-of-type(2) > img{ } .indexMainBottm01{ width: 100%; margin-top: -7rem; z-index: 996; } .indexMainBottmBox01{ width: 95%; margin: auto; } .indexMainBottmBox01 > div{ width:90%; margin: auto; } .indexMainBottmBox02{ display: flex; flex-wrap: nowrap; justify-content: space-between; } .indexMainBottmBox02 > div:nth-of-type(1){ width: 5rem; z-index: 995;} .indexMainBottmBox02 > div:nth-of-type(2){ width: 95%; background-color: #ffffff; margin-top: 1rem; margin-left: -1rem; padding: 1rem 1rem; border-radius: 0.5rem; border: #ffffff 4px solid; margin-bottom: 0.25rem; } .indexMainBottmBox02 > div:nth-of-type(2):before{ content: ""; position: absolute; border: solid 2px #2895f9; border-radius: 0.4rem; top: 4px; left: 4px; bottom: 4px; right: 4px;} .indexMainBottmBox02 > div:nth-of-type(2) > p:nth-of-type(1){ font-size: 1rem; font-weight: bold; text-align: center; line-height: 150%; } .indexMainBottmBox02 > div:nth-of-type(2) > p:nth-of-type(2){ font-size: 1.25rem; font-weight: bold; text-align: center; line-height: 150%; background:linear-gradient(transparent 60%, #fff658 0%); } .indexMainBottm02{ width: 100%; height: 18rem; margin-top: -18rem; background-color: #05357a; } .contentsArea01{ width: 100%; background-color: #05357a; padding: 3rem 0; } .contentsBox01{ width: 95%; margin: auto; } .contentsBox01Inner01{ width: 100%; background-color: #00aeeb; border-top-left-radius: 1rem; border-top-right-radius: 1rem; } .contentsBox01Inner01 > p{ font-size: 1.5rem; font-weight: bold; line-height: 150%; padding: 1rem; text-align: center; color: #ffffff; } .contentsBox01Inner02{ width: 100%; background-color: #ffffff; padding: 1rem 0; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; } .contentsBox01Inner02Box01{ width:90% ; margin: auto;} .contentsBox01Inner02Box01 > p{ font-size: 1.25rem; font-weight: bold; line-height: 150%; color: #05357a; text-align: center; padding-bottom: 1rem; border-bottom: #999999 1px solid;} .contentsBox01Inner02Box02{ width:90% ; margin: auto; margin-top: 1rem; } .contentsBox01Inner02Box02 > div:nth-of-type(1){ width: 100%; } .contentsBox01Inner02Box02 > div:nth-of-type(1) > p:nth-of-type(1){ font-size: 1.75rem; line-height: 150%; font-weight: bold; text-align: center;} .contentsBox01Inner02Box02 > div:nth-of-type(1) > p:nth-of-type(2){ font-size: 1.25rem; line-height: 150%; text-align: center; } .contentsBox01Inner02Box02 > div:nth-of-type(1) > p:nth-of-type(2):before{ content: url("../../img/mailIcon.svg"); display: inline-block; height: 1.5rem; width: 1.5rem; margin-right: 0.25rem; } .contentsBox01Inner02Box02 > div:nth-of-type(1) > p:nth-of-type(3){ font-size: 1.5rem; line-height: 150%; font-weight: bold; margin-top: 0.5rem; text-align: center; } .contentsBox01Inner02Box02 > div:nth-of-type(1) > p:nth-of-type(4){ line-height: 150%; text-align: center;} .contentsBox01Inner02Box02 > div:nth-of-type(1) > p:nth-of-type(5){ font-size: 2.5rem; line-height: 150%; font-weight: bold; text-align: center; } .contentsBox01Inner02Box02 > div:nth-of-type(1) > p:nth-of-type(5):before{ content: url("../../img/phoneIcon.svg"); display: inline-block; height: 1.75rem; width: 1.75rem; margin-right: 0.25rem; } .contentsBox01Inner02Box02 > div:nth-of-type(1) > a{ display: block; width: 100%; height: 5rem; text-decoration: none; background-color:#ff6c00; border-radius: 0.5rem; margin-top: 1rem;} .contentsBox01Inner02Box02 > div:nth-of-type(1) > a > p{ font-size: 1.5rem; font-weight: bold; line-height: 5rem; color: #ffffff; text-align: center;} .contentsBox01Inner02Box02 > div:nth-of-type(1) > a:hover{ opacity: 0.6; } .contentsBox01Inner02Box02 > div:nth-of-type(2){ width: 100%; margin-top: 1rem; } .contentsArea02{ width:100%; background-image: url("../../img/indexImg06.jpg"); background-size:cover; background-position: center; } .contentsBox02{ width: 95%; margin: auto; padding: 3rem 0; } .contentsBox02Inner01{ width: 100%; } .contentsBox02Inner01 > p{ font-size: 2rem; line-height: 150%; font-weight: bold; text-align: center; color: #ffffff; } .contentsBox02Inner02{ width: 80%; margin: auto; } .contentsBox02Inner02 > div{ width: 100%; margin: 0.5rem 0; } .contentsBox02Inner02 > div > p{ font-size: 1.25rem; font-weight: bold; line-height: 150%; text-align: center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; } .contentsBox02Inner03{ width: 75%; margin: auto; margin-top: 1rem; } .contentsBox02Inner04{ width: 100%; margin-top: 1rem; } .contentsBox02Inner04 > p{ font-size: 2rem; font-weight: bold; text-align: center; color: #fff658; } .contentsArea03{ width: 100%; margin-top: -2rem;} .contentsBox03{ width: 60%; margin: auto; } .contentsBox04{ width: 95%; margin: auto; margin-top: 2rem; padding: 1rem; background-color: #00aeeb; border-radius: 1rem; } .contentsBox04 > p:nth-of-type(1){ font-size: 1.5rem; font-weight: bold; color: #ffffff; line-height: 150%; text-align: center; } .contentsBox04 > p:nth-of-type(2){ font-size: 2rem; font-weight: bold; color: #ffffff; line-height: 150%; text-align: center; } .contentsBox05{ width: 95%; margin: auto; margin-top: 1rem; margin-bottom: 3rem; } .contentsArea04{ width: 100%; padding: 2rem 0; background-color:#05357a; } .contentsArea04 > p:nth-of-type(1){ font-size: 1.5rem; font-weight: bold; color: #ffffff; line-height: 150%; text-align: center; } .contentsArea04 > p:nth-of-type(2){ font-size: 2rem; font-weight: bold; color: #ffffff; line-height: 150%; text-align: center; } .contentsArea05{ width: 100%; padding: 3rem 0;} .contentsBox06{ width: 95%; } .contentsBox06 > p{ font-size: 2rem; text-align: center; line-height: 150%; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";} .contentsBox07{ width: 95%; margin: auto; margin-top: 2.5rem; } .contentsBox07 > p{ font-size: 1.5rem; font-weight: bold; line-height: 150%; text-align: center; } .contentsBox07 > p:before{ content: url("../../img/indexImg11.svg"); display: inline-block; height: 2rem; width: 2rem; margin-right: 0.5rem; } .contentsBox08{ max-width: 90%; margin: auto; margin-top: 2rem; } .contentsBox08 > p:nth-of-type(1){ font-size: 1.5rem; line-height: 150%; font-weight: bold; margin-top: 1.5rem; color:#05357a; } .contentsBox08 > p:nth-of-type(1):before{ content: url("../../img/indexImg12.svg"); display: inline-block; height: 1.75rem; width: 1.75rem; margin-right: 0.5rem; } .contentsBox08 > p:nth-of-type(2){ font-size: 1rem; margin-top: 0.75rem; } .contentsArea06{ width: 100%; padding: 2rem 0; background-color:#05357a; } .contentsBox09{ width: 90%; margin: auto; padding-bottom: 1rem; } .contentsBox09 > p{ font-size: 2rem; font-weight: bold; line-height: 150%; color: #ffffff; text-align: center; } .contentsBox10{ width: 95%; margin: auto; background-color: #ffffff; padding: 1rem; margin-top: 1rem; border-radius: 1rem; } .contentsBox10 > p:nth-of-type(1){ font-size: 1.75rem; line-height: 150%; font-weight: bold; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; } .contentsBox10 > p:nth-of-type(2){ font-size: 1rem; line-height: 150%; margin-top: 1rem; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; } .contentsBox10 > p:nth-of-type(3){ font-size: 1.5rem; line-height: 150%; font-weight: bold; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; } .contentsBox10 > p:nth-of-type(4){ font-size: 1rem; line-height: 150%; margin-top: 0.5rem; } .contentsBox11{ width: 90%; margin: auto; margin-top: 2rem;} .contentsBox11 > p{ font-size: 1.5rem; font-weight: bold; line-height: 150%; color: #ffffff; text-align: center; } .contentsArea07{ width: 100%; padding: 3rem 0; } .contentsBox12{ width: 95%; margin: auto; } .contentsBox12 > p:nth-of-type(1){ font-size: 2rem; font-weight: bold; line-height: 150%; text-align: center; } .contentsBox12 > p:nth-of-type(2){ font-size: 1.25rem; line-height: 150%; text-align: center; margin-top: 1rem; } .contentsBox13{ width: 95%; margin: auto; margin-top: 1rem; } .contentsBox13Inner01{ width: 100%; padding: 1rem 0; background-color: #00aeeb; border-top-left-radius: 1rem; border-top-right-radius: 1rem; } .contentsBox13Inner01 > div:nth-of-type(1){ width: 100%; display: table; } .contentsBox13Inner01 > div:nth-of-type(1) > p{ font-size: 1.5rem; font-weight: bold; text-align: center; line-height: 100%; color: #ffffff; display: table-cell; vertical-align: middle; } .contentsBox13Inner01 > div:nth-of-type(2){ width: 100%; display: table; margin-top: 0.5rem; } .contentsBox13Inner01 > div:nth-of-type(2) > p{ font-size: 1.25rem; font-weight: bold; line-height: 150%; color: #ffffff; display: table-cell; vertical-align: middle; padding: 0 1rem; } .contentsBox13Inner02{ width: 100%; padding: 1rem; border-left: #999999 1px solid; border-right: #999999 1px solid; border-bottom: #999999 1px solid; } .contentsBox13Inner02 > div:nth-of-type(1){ width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .contentsBox13Inner02 > div:nth-of-type(1) > div:nth-of-type(1){ width: 30%; padding: 1rem 0; background-color: #00aeeb; border-radius: 0.5rem; } .contentsBox13Inner02 > div:nth-of-type(1) > div:nth-of-type(1) >p{ font-size: 1.5rem; font-weight: bold; line-height: 125%; text-align: center; color: #ffffff; } .contentsBox13Inner02 > div:nth-of-type(1) > div:nth-of-type(2){ width: 67%; } .contentsBox13Inner02 > div:nth-of-type(1) > div:nth-of-type(2) > p:nth-of-type(1){ width:10rem; font-size: 1rem; font-weight: bold; line-height: 125%; color: #00aeeb; text-align: center; padding: 0.25rem; border: #00aeeb 2px solid; border-radius: 0.5rem; } .contentsBox13Inner02 > div:nth-of-type(1) > div:nth-of-type(2) > p:nth-of-type(2){ font-size: 3.5rem; font-weight: bold; line-height: 100%; color: #00aeeb; margin-top: 0.5rem;background:linear-gradient(transparent 60%, #fff658 0%); } .contentsBox13Inner02 > div:nth-of-type(1) > div:nth-of-type(2) > p:nth-of-type(2) > span{ font-size: 2rem; line-height: 100%; font-weight: bold; } .contentsBox13Inner02 > div:nth-of-type(2){ width: 100%; margin-top: 0.5rem; } .contentsBox13Inner02 > div:nth-of-type(2) > div{ width: 100%; height: 2.5rem; display: flex; flex-wrap: nowrap; justify-content: space-between; border: #05357a 2px solid; border-radius: 0.5rem; margin-bottom: 0.25rem; } .contentsBox13Inner02 > div:nth-of-type(2) > div > p:nth-of-type(1){ width: 30%; font-weight: bold; text-align: center; line-height: 2.5rem; color: #ffffff; background-color: #05357a; } .contentsBox13Inner02 > div:nth-of-type(2) > div > p:nth-of-type(2){ width: 70%; font-weight: bold; text-align: center; line-height: 2.5rem; color: #05357a; } .contentsBox13Inner03{ width: 100%; padding: 1.5rem 0; border-left: #999999 1px solid; border-right: #999999 1px solid; border-bottom: #999999 1px solid; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; } .contentsBox13Inner03 > div{ width: 90%; margin: auto; } .contentsBox13Inner03 > div:nth-of-type(n+2){ margin-top: 1rem; } .contentsBox13Inner03 > div:nth-of-type(n+2) >p:nth-of-type(1){ font-size: 1.25rem; font-weight: bold; } .contentsBox13Inner03 > div:nth-of-type(n+2) >p:nth-of-type(2){} .contentsArea08{ width: 100%; padding: 2rem 1rem; background-color:#05357a; } .contentsArea08 > p{ font-size: 2rem; font-weight: bold; color: #ffffff; line-height: 150%; text-align: center; } .contentsArea09{ width: 95%; margin: auto; padding: 3rem 0; } .contentsBox14{ width: 100%; } .contentsBox14 > p:nth-of-type(1){ font-size: 2rem; font-weight: bold; line-height: 150%; text-align: center; } .contentsBox14 > p:nth-of-type(2){ font-size: 1.25rem; line-height: 150%; text-align: center; margin-top: 1.5rem; } .contentsBox15{ width: 100%; margin: auto; margin-top: 2rem; } .contentsBox15 > div{ width: 100%; } .contentsBox15Inner{ width: 100%; margin-top: 1.5rem; } .contentsBox15Inner > div:nth-of-type(1){} .contentsBox15Inner > div:nth-of-type(1) > img{ width: 8rem; margin: auto; } .contentsBox15Inner > div:nth-of-type(1) > p{ font-size: 1.5rem; font-weight: bold; color: #ffffff; line-height: 125%; text-align: center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding-bottom: 2rem; } .contentsBox15Inner > div:nth-of-type(2){ font-size: 1rem; margin-top: 0.5rem; } .footer{ display:block; padding:2rem 0; width:100%; background-color:#05357a; } .footerTitle{ width:65vw; margin:0 auto; } .footer > p{ margin-top:1rem; font-size:0.8rem; color:#ffffff; text-align:center; } } /*=================================================================== PC ===================================================================*/ @media( min-width:1024px ) { /* Common */ body{ font-size:16px; } .sp{ display:none !important; } .pc{ display:block; } .indexHeadBlueLine{ display:block; width:100%; height:0.6rem; position:absolute; top:0; left:0; z-index:+10; background-color:#0087b4; } .indexHeader{ width:100%; background-color: #ffffff; z-index: 999; position: fixed; } .indexHeaderBox{ width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between;padding: 1rem 1rem 0 1rem;} .indexHeaderBox > div:nth-of-type(1){ width: 384px; } .indexHeaderBox > div:nth-of-type(1) > img{ } .indexHeaderBox > div:nth-of-type(2){ width: 504px; } .indexHeaderInner{ display: flex; flex-wrap: nowrap; justify-content: space-between; } .indexHeaderInner > div:nth-of-type(1){ width: 336px;} .indexHeaderInner > div:nth-of-type(1) > p:nth-of-type(1){ font-size: 1rem;line-height: 125%; } .indexHeaderInner > div:nth-of-type(1) > p:nth-of-type(2){ font-size: 2.5rem; font-weight:bold; line-height: 100%; margin-top: 0.25rem; } .indexHeaderInner > div:nth-of-type(1) > p:nth-of-type(2):before{ content: url("../../img/phoneIcon.svg"); display: inline-block; height: 1.75rem; width: 1.75rem; margin-right: 0.25rem; } .indexHeaderInner > div:nth-of-type(2){ width:160px; background-color:#ff6c00; border-radius: 0.5rem; } .indexHeaderInner > div:nth-of-type(2) > a{ display: block; text-decoration: none; } .indexHeaderInner > div:nth-of-type(2) > a > p{ font-weight: bold; color:#ffffff; text-align: center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; } .indexHeaderInner > div:nth-of-type(2) > a:hover{ opacity: 0.7; } .indexHeaderColorBar{ width: 100%; height: 6px; background-color: #00aeeb; margin-top: 0.5rem; } .indexMainImgArea{ width:100%; height:100vh; background-image: url("../../img/mainImg_pc.jpg"); background-size:cover; background-position:top; } .indexMainImgAreaBox01{ width: 100%; height: 100%; } .indexMainImgAreaBox02{ max-width: 1280px; height:100%; padding: 0 1rem; display: flex; flex-wrap: nowrap; justify-content: space-between; padding-bottom: 13rem; margin: auto; align-items: flex-end; z-index: 997; } .indexMainImgAreaBox02 > div:nth-of-type(1){ width: 640px; padding: 0 1.5rem; background-color: rgba(255,255,255,0.6); border-radius: 1rem; } .indexMainImgAreaBox02 > div:nth-of-type(1) > p:nth-of-type(1){ font-size: 2rem; line-height: 150%; margin-top: 0.5rem; padding-top: 2rem; } .indexMainImgAreaBox02 > div:nth-of-type(1) > p:nth-of-type(2){ font-size: 4rem; line-height: 125%; } .indexMainImgAreaBox02 > div:nth-of-type(1) > p:nth-of-type(2) > span{ font-size: 3rem;} .indexMainImgAreaBox02 > div:nth-of-type(1) > p:nth-of-type(3){ font-size: 4rem; line-height: 125%; } .indexMainImgAreaBox02 > div:nth-of-type(1) > p:nth-of-type(4){ font-size: 1.75rem; line-height: 150%; margin-top: 0.5rem; padding-bottom: 2rem;} .indexMainImgAreaBox02 > div:nth-of-type(2){ width: 192px; } .indexMainImgAreaBox02 > div:nth-of-type(2) > img{ } .indexMainBottm01{ width: 100%; margin-top: -12rem; z-index: 996; } .indexMainBottmBox01{ width: 1024px; display: flex; flex-wrap: nowrap; justify-content: space-between; margin: auto; } .indexMainBottmBox01 > div{ width:332px; } .indexMainBottmBox02{ display: flex; flex-wrap: nowrap; justify-content: space-between; } .indexMainBottmBox02 > div:nth-of-type(1){ width: 72px; z-index: 995;} .indexMainBottmBox02 > div:nth-of-type(2){ width: 308px; background-color: #ffffff; margin-top: 1.5rem; margin-left: -3rem; padding: 2rem 1em; border-radius: 0.5rem; border: #ffffff 4px solid; } .indexMainBottmBox02 > div:nth-of-type(2):before{ content: ""; position: absolute; border: solid 2px #2895f9; border-radius: 0.4rem; top: 4px; left: 4px; bottom: 4px; right: 4px;} .indexMainBottmBox02 > div:nth-of-type(2) > p:nth-of-type(1){ font-size: 1.25rem; font-weight: bold; text-align: center; line-height: 150%; } .indexMainBottmBox02 > div:nth-of-type(2) > p:nth-of-type(2){ font-size: 1.75rem; font-weight: bold; text-align: center; line-height: 150%; background:linear-gradient(transparent 60%, #fff658 0%); } .indexMainBottm02{ width: 100%; height: 8rem; margin-top: -6rem; background-color: #05357a; } .contentsArea01{ width: 100%; background-color: #05357a; padding: 4rem 0; } .contentsBox01{ width: 1024px; margin: auto; } .contentsBox01Inner01{ width: 100%; background-color: #00aeeb; border-top-left-radius: 1rem; border-top-right-radius: 1rem; } .contentsBox01Inner01 > p{ font-size: 2.5rem; font-weight: bold; line-height: 150%; padding: 1.5rem 0; text-align: center; color: #ffffff; } .contentsBox01Inner02{ width: 100%; background-color: #ffffff; padding: 2rem 0; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; } .contentsBox01Inner02Box01{ width:880px ; margin: auto;} .contentsBox01Inner02Box01 > p{ font-size: 2rem; font-weight: bold; line-height: 150%; color: #05357a; text-align: center; padding-bottom: 2rem; border-bottom: #999999 1px solid;} .contentsBox01Inner02Box02{ width:880px ; display: flex; flex-wrap: nowrap; justify-content: space-between; margin: auto; margin-top: 2rem; } .contentsBox01Inner02Box02 > div:nth-of-type(1){ width: 352px; } .contentsBox01Inner02Box02 > div:nth-of-type(1) > p:nth-of-type(1){ font-size: 2rem; line-height: 150%; font-weight: bold;} .contentsBox01Inner02Box02 > div:nth-of-type(1) > p:nth-of-type(2){ font-size: 1.5rem; line-height: 150%; } .contentsBox01Inner02Box02 > div:nth-of-type(1) > p:nth-of-type(2):before{ content: url("../../img/mailIcon.svg"); display: inline-block; height: 1.75rem; width: 1.75rem; margin-right: 0.25rem; } .contentsBox01Inner02Box02 > div:nth-of-type(1) > p:nth-of-type(3){ font-size: 1.75rem; line-height: 150%; font-weight: bold; margin-top: 0.5rem; } .contentsBox01Inner02Box02 > div:nth-of-type(1) > p:nth-of-type(4){ line-height: 150%;} .contentsBox01Inner02Box02 > div:nth-of-type(1) > p:nth-of-type(5){ font-size: 2.5rem; line-height: 150%; font-weight: bold;} .contentsBox01Inner02Box02 > div:nth-of-type(1) > p:nth-of-type(5):before{ content: url("../../img/phoneIcon.svg"); display: inline-block; height: 1.75rem; width: 1.75rem; margin-right: 0.25rem; } .contentsBox01Inner02Box02 > div:nth-of-type(1) > a{ display: block; width: 100%; height: 5rem; text-decoration: none; background-color:#ff6c00; border-radius: 0.5rem; margin-top: 1rem;} .contentsBox01Inner02Box02 > div:nth-of-type(1) > a > p{ font-size: 1.5rem; font-weight: bold; line-height: 5rem; color: #ffffff; text-align: center;} .contentsBox01Inner02Box02 > div:nth-of-type(1) > a:hover{ opacity: 0.6; } .contentsBox01Inner02Box02 > div:nth-of-type(2){ width: 496px; } .contentsArea02{ width:100%; background-image: url("../../img/indexImg06.jpg"); background-size:cover; background-position: center; } .contentsBox02{ width: 1024px; margin: auto; padding: 4rem 0; } .contentsBox02Inner01{ width: 100%; } .contentsBox02Inner01 > p{ font-size: 3rem; line-height: 150%; font-weight: bold; text-align: center; color: #ffffff; } .contentsBox02Inner02{ width: 100%; margin-top: 1rem; display: flex; flex-wrap: nowrap; justify-content: center; } .contentsBox02Inner02 > div{ width: 19rem; margin: 0 1rem; } .contentsBox02Inner02 > div > p{ font-size: 1.25rem; font-weight: bold; line-height: 150%; text-align: center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; } .contentsBox02Inner03{ width: 468px; margin: auto; margin-top: 1rem; } .contentsBox02Inner04{ width: 100%; margin-top: 1rem; } .contentsBox02Inner04 > p{ font-size: 4rem; font-weight: bold; text-align: center; color: #fff658; } .contentsArea03{ width: 100%; margin-top: -2rem;} .contentsBox03{ width: 256px; margin: auto; } .contentsBox04{ width: 848px; margin: auto; margin-top: 2rem; padding: 1rem; background-color: #00aeeb; border-radius: 1rem; } .contentsBox04 > p:nth-of-type(1){ font-size: 2.5rem; font-weight: bold; color: #ffffff; line-height: 150%; text-align: center; } .contentsBox04 > p:nth-of-type(2){ font-size: 3rem; font-weight: bold; color: #ffffff; line-height: 150%; text-align: center; } .contentsBox05{ width: 848px; margin: auto; margin-top: 2rem; margin-bottom: 4rem; } .contentsArea04{ width: 100%; padding: 2rem 0; background-color:#05357a; } .contentsArea04 > p:nth-of-type(1){ font-size: 2rem; font-weight: bold; color: #ffffff; line-height: 150%; text-align: center; } .contentsArea04 > p:nth-of-type(2){ font-size: 3rem; font-weight: bold; color: #ffffff; line-height: 150%; text-align: center; } .contentsArea05{ width: 100%; padding: 4rem 0;} .contentsBox06{} .contentsBox06 > p{ font-size: 3rem; text-align: center; line-height: 150%; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";} .contentsBox07{ width: 100%; margin-top: 3rem; } .contentsBox07 > p{ font-size: 2.5rem; font-weight: bold; line-height: 150%; text-align: center; } .contentsBox07 > p:before{ content: url("../../img/indexImg11.svg"); display: inline-block; height: 4rem; width: 4rem; margin-right: 0.5rem; } .contentsBox08{ max-width: 1080px; margin: auto; margin-top: 2rem; } .contentsBox08 > p:nth-of-type(1){ font-size: 2.25rem; font-weight: bold; margin-top: 1.5rem; color:#05357a; } .contentsBox08 > p:nth-of-type(1):before{ content: url("../../img/indexImg12.svg"); display: inline-block; height: 3rem; width: 3rem; margin-right: 0.5rem; } .contentsBox08 > p:nth-of-type(2){ font-size: 1.25rem; margin-top: 0.5rem; } .contentsArea06{ width: 100%; padding: 4rem 0; background-color:#05357a; } .contentsBox09{ width: 100%; padding-bottom: 2rem; } .contentsBox09 > p{ font-size: 3rem; font-weight: bold; line-height: 150%; color: #ffffff; text-align: center; } .contentsBox10{ width: 848px; margin: auto; background-color: #ffffff; padding: 1.5rem; margin-top: 1.5rem; border-radius: 1rem; } .contentsBox10 > p:nth-of-type(1){ font-size: 2.5rem; line-height: 150%; font-weight: bold; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; } .contentsBox10 > p:nth-of-type(2){ font-size: 1.5rem; line-height: 150%; margin-top: 1rem; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; } .contentsBox10 > p:nth-of-type(3){ font-size: 1.75rem; line-height: 150%; font-weight: bold; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; } .contentsBox10 > p:nth-of-type(4){ font-size: 1.25rem; line-height: 150%; margin-top: 1rem; } .contentsBox11{ width: 100%; margin-top: 3rem;} .contentsBox11 > p{ font-size: 2.5rem; font-weight: bold; line-height: 150%; color: #ffffff; text-align: center; } .contentsArea07{ width: 100%; padding: 4rem 0; } .contentsBox12{ } .contentsBox12 > p:nth-of-type(1){ font-size: 3rem; font-weight: bold; line-height: 150%; text-align: center; } .contentsBox12 > p:nth-of-type(2){ font-size: 2rem; line-height: 150%; text-align: center; margin-top: 1.5rem; } .contentsBox13{ width: 1024px; margin: auto; margin-top: 3rem; } .contentsBox13Inner01{ width: 100%; padding: 1.5rem 0; display: flex; flex-wrap: nowrap; justify-content: flex-start; background-color: #00aeeb; border-top-left-radius: 1rem; border-top-right-radius: 1rem; } .contentsBox13Inner01 > div:nth-of-type(1){ width: 20%; display: table; } .contentsBox13Inner01 > div:nth-of-type(1) > p{ font-size: 2.5rem; font-weight: bold; text-align: center; line-height: 100%; color: #ffffff; display: table-cell; vertical-align: middle; } .contentsBox13Inner01 > div:nth-of-type(2){ flex: 1; display: table; } .contentsBox13Inner01 > div:nth-of-type(2) > p{ font-size: 1.75rem; font-weight: bold; line-height: 150%; color: #ffffff; display: table-cell; vertical-align: middle; } .contentsBox13Inner02{ width: 100%; display: flex; flex-wrap: nowrap; justify-content: flex-start; padding: 1.5rem; border-left: #999999 1px solid; border-right: #999999 1px solid; border-bottom: #999999 1px solid; } .contentsBox13Inner02 > div:nth-of-type(1){ width: 416px; display: flex; flex-wrap: nowrap; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .contentsBox13Inner02 > div:nth-of-type(1) > div:nth-of-type(1){ width: 112px; height: 112px; padding: 1rem 0; background-color: #00aeeb; border-radius: 0.5rem; } .contentsBox13Inner02 > div:nth-of-type(1) > div:nth-of-type(1) >p{ font-size: 2rem; font-weight: bold; line-height: 125%; text-align: center; color: #ffffff; } .contentsBox13Inner02 > div:nth-of-type(1) > div:nth-of-type(2){ flex: 1; margin-left: 1rem; } .contentsBox13Inner02 > div:nth-of-type(1) > div:nth-of-type(2) > p:nth-of-type(1){ width:10rem; font-size: 1.25rem; font-weight: bold; line-height: 125%; color: #00aeeb; text-align: center; padding: 0.25rem; border: #00aeeb 2px solid; border-radius: 0.5rem; } .contentsBox13Inner02 > div:nth-of-type(1) > div:nth-of-type(2) > p:nth-of-type(2){ font-size: 5rem; font-weight: bold; line-height: 100%; color: #00aeeb; margin-top: 0.5rem; background:linear-gradient(transparent 70%, #fff658 0%); } .contentsBox13Inner02 > div:nth-of-type(1) > div:nth-of-type(2) > p:nth-of-type(2) > span{ font-size: 3rem; line-height: 100%; font-weight: bold; } .contentsBox13Inner02 > div:nth-of-type(2){ width: 528px; display: flex; flex-wrap: wrap; justify-content: space-between; margin-left: 2rem; } .contentsBox13Inner02 > div:nth-of-type(2) > div{ width: 256px; height: 3rem; display: flex; flex-wrap: nowrap; justify-content: space-between; border: #05357a 2px solid; border-radius: 0.5rem; } .contentsBox13Inner02 > div:nth-of-type(2) > div > p:nth-of-type(1){ width: 80px; font-weight: bold; text-align: center; line-height: 3rem; color: #ffffff; background-color: #05357a; } .contentsBox13Inner02 > div:nth-of-type(2) > div > p:nth-of-type(2){ width: 176px; font-weight: bold; text-align: center; line-height: 3rem; color: #05357a; } .contentsBox13Inner03{ width: 100%; padding: 3rem 0; border-left: #999999 1px solid; border-right: #999999 1px solid; border-bottom: #999999 1px solid; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; } .contentsBox13Inner03 > div{ width: 848px; margin: auto; } .contentsBox13Inner03 > div:nth-of-type(n+2){ margin-top: 2rem; } .contentsBox13Inner03 > div:nth-of-type(n+2) >p:nth-of-type(1){ font-size: 1.25rem; font-weight: bold; } .contentsBox13Inner03 > div:nth-of-type(n+2) >p:nth-of-type(2){} .contentsArea08{ width: 100%; padding: 2rem 0; background-color:#05357a; } .contentsArea08 > p{ font-size: 3rem; font-weight: bold; color: #ffffff; line-height: 150%; text-align: center; } .contentsArea09{ width: 100%; padding: 4rem 0; } .contentsBox14{ } .contentsBox14 > p:nth-of-type(1){ font-size: 3rem; font-weight: bold; line-height: 150%; text-align: center; } .contentsBox14 > p:nth-of-type(2){ font-size: 2rem; line-height: 150%; text-align: center; margin-top: 1.5rem; } .contentsBox15{ width: 1024px; display: flex; flex-wrap: nowrap; justify-content: space-between; margin: auto; margin-top: 3rem; } .contentsBox15 > div{ width: 304px; } .contentsBox15Inner{ width: 100%; } .contentsBox15Inner > div:nth-of-type(1){} .contentsBox15Inner > div:nth-of-type(1) > img{ width: 192px; margin: auto; } .contentsBox15Inner > div:nth-of-type(1) > p{ font-size: 2rem; font-weight: bold; color: #ffffff; line-height: 125%; text-align: center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:192px; padding-right: 2rem; } .contentsBox15Inner > div:nth-of-type(2){ font-size: 1.25rem; margin-top: 2rem; } .footer{ display:block; padding:2rem 0; width:100%; background-color:#05357a; } .footerTitle{ width:340px; margin:0 auto; } .footer > p{ margin-top:1rem; font-size:0.9rem; color:#ffffff; text-align:center; } }