@charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; box-sizing: border-box; } html{ line-height: 1; } .clearfix:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{ display: inline-table; } /* Hides from IE-mac \*/ * html .clearfix{ height: 1%; } .clearfix{ display: block; } /* End hide from IE-mac */ ol, ul{ list-style: none; } table{ border-collapse: collapse; border-spacing: 0; } .clear { clear: both; } em.red{ color: #d4145a; } caption, th, td{ text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote{ quotes: none; } q:before, q:after, blockquote:before, blockquote:after{ content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary{ display: block; } *, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body{ color: #000; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; line-height: 1.5; -webkit-text-size-adjust: 100%; } img{ height: auto; max-width: 100%; } a{ text-decoration: none; } @media screen and (max-width: 768px) { .hidden-sp{ display: none !important; } } @media screen and (min-width: 769px) { .hidden-pc{ display: none !important; } } @media screen and (max-width: 980px) { .hidden-980min{ display: none !important; } } @media screen and (min-width: 980px) { .hidden-980over{ display: none !important; } } /*------------------------------------------ サービス別レスポンシブ ------------------------------------------*/ /*youtube*/ .youtubeWrapper{ position: relative; width: 100%; padding-top: 56.25%; } .youtubeWrapper iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } /*googlemap*/ .ggmapWrapper{ position: relative; /*padding-bottom: 56.25%;*/ height: 390px; overflow: hidden; } .ggmapWrapper iframe, .ggmapWrapper object, .ggmapWrapper embed{ position: absolute; top: -200px; left: 0; width: 100%; height: 600px; } .ggmapWrapper iframe{ height: 800px; } /*------------------------------------------ cmn ------------------------------------------*/ img{ vertical-align: top; } .hoverBtn{ -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } .hoverBtn:hover{ } @media screen and (max-width: 768px) { img{ width: 100%; } } /*------------------------------------------ body ------------------------------------------*/ body{ } .en{ font-family: 'Roboto Condensed', sans-serif; } @media screen and (max-width: 768px) { } /*------------------------------------------ mv ------------------------------------------*/ .mvWrapper{ } @media screen and (min-width: 769px) { .mvWrapper.fix{ margin-bottom: 81px; } } @media screen and (max-width: 768px) { .mvWrapper{ } } /*------------------------------------------ header nav ------------------------------------------*/ .menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; } .menu-trigger { position: relative; width: 30px; height: 22px; } .menu-trigger span { position: absolute; left: 0; width: 100%; height: 1px; background-color: #2ea9d2; } .menu-trigger span:nth-of-type(1) { top: 0; } .menu-trigger span:nth-of-type(2) { top: 10px; width: 100%; } .menu-trigger span:nth-of-type(3) { bottom: 0; } .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg); } .menu-trigger.active span:nth-of-type(2) { left: 50%; opacity: 0; -webkit-animation: active-menu-bar02 .8s forwards; animation: active-menu-bar02 .8s forwards; } @-webkit-keyframes active-menu-bar02 { 100% { height: 0; } } @keyframes active-menu-bar02 { 100% { height: 0; } } .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-11px) rotate(45deg); transform: translateY(-11px) rotate(45deg); } /*PC*/ @media screen and (min-width: 769px) { header{ background: #2ea9d2; width: 100%; &.fix{ position: fixed; top: 0; left: 0; z-index: 1000; } nav{ width: 100%; max-width: 95%; margin: 0 auto; .navInner{ display: block !important; } ul{ max-width: 980px; margin: 0 auto; display: -ms-flex; display: flex; justify-content: space-between; li{ padding: 15px 0; a{ color: #FFF; text-align: center; display: block; .en{ font-size: 20px; font-weight: 700; display: block; } .jp{ font-size: 14px; font-weight: 700; display: block; } &:hover{ opacity: 0.8; } } } } } } } /*SP*/ @media screen and (max-width: 768px) { header{ width: 100%; padding: 0; z-index: 1000; background: #FFF; top: 0; position: fixed; .headerTop{ height: 60px; box-shadow: 0 3px 3px rgba(0,0,0,0.2); } nav{ padding: 0 0 0 0; ul{ padding-left: 0; li{ margin-right: 0; } } } } .menuBtn{ width: 30px; float: right; right: 15px; position: relative; top: 18px; } nav .navInner{ width: 100%; height: 100vh; margin: 0 auto; padding: 30px 0 0 0; display: none; background: rgba(255,255,255,1); left: 0; top: 0; z-index: 1000; ul{ li{ padding: 0 5%; margin-bottom: 24px; text-align: center; a{ display: block; position: relative; font-size: 18px; color: #2ea9d2; .en{ font-weight: 700; } span{ display: block; } } &:last-child{ margin-bottom: 0; a{ img{ max-width: 224px; } } } } } } } /*------------------------------------------ #cmn ------------------------------------------*/ h2{ .en{ display: block; font-size: 120px; font-weight: 700; line-height: 1; color: #2ea9d2; } .jp{ display: inline-block; margin-top: 7px; padding-top: 20px; border-top: 1px solid #000; font-size: 21px; font-weight: 400; } } .innerBox{ max-width: 980px; margin: 0 auto; } @media screen and (max-width: 768px) { h2{ .en{ font-size: 50px; } .jp{ margin-top: 7px; padding-top: 10px; font-size: 18px; } } } /*------------------------------------------ #top ------------------------------------------*/ h1{ padding: 20px 0 0 10px; font-size: 16px; font-weight: 700; } .btnList{ padding: 85px 0 135px 0; a{ display: table; width: 100%; max-width: 400px; height: 80px; margin: 0 auto; background: url("../img/arrow_02.png") no-repeat right 15px center / 10px #e50182; font-size: 22px; font-weight: 700; color: #FFF; span{ display: table-cell; text-align: center; vertical-align: middle; } &:hover{ opacity: 0.8; } } } @media screen and (max-width: 768px) { h1{ padding: 80px 0 0 10px; font-size: 14px; } .btnList{ padding: 10% 5% 120px 5%; } } /*------------------------------------------ #contents_01 ------------------------------------------*/ .contents_bg_01{ } .contents_01{ max-width: 980px; margin: 0 auto 120px auto; border: 10px solid #f1f1f1; position: relative; h2{ position: absolute; right: 60px; top: -80px; } .areaBox{ display: -ms-flex; display: flex; justify-content: space-between; align-items: center; .boxL{ padding: 120px 0 60px 80px; flex-basis: 420px; ul{ li{ margin-bottom: 10px; &:last-child{ margin-bottom: 0; } } } select{ cursor: pointer; } .customSelect{ width: 100%; max-width: 340px; height: 60px; padding: 15px 0 0 20px; background: url("../img/arrow_01.png") no-repeat right 15px center / 19px #ededed; font-size: 18px; cursor: pointer; } } .boxR{ padding: 80px 50px 0 50px; } } } @media screen and (max-width: 768px) { .contents_01{ max-width: 90%; margin: 0 auto 100px auto; border: 5px solid #f1f1f1; h2{ position: absolute; right: 5%; top: -30px; } .areaBox{ display: block; justify-content: inherit; align-items: inherit; .boxL{ padding: 100px 5% 30px 5%; flex-basis: inherit; ul{ li{ margin-bottom: 10px; text-align: center; &:last-child{ margin-bottom: 0; } } } select{ cursor: pointer; } .customSelect{ text-align: left; } } .boxR{ padding: 0 5% 5% 5%; text-align: center; img{ max-width: 429px; } } } } } /*------------------------------------------ #contents_02 ------------------------------------------*/ .contents_bg_02{ background: url("../img/bg_introduction.jpg") no-repeat center / cover; } .contents_02{ padding: 80px 0 110px 0; margin-bottom: 140px; h2{ margin-bottom: 40px; } h3{ margin-bottom: 30px; font-size: 30px; font-weight: 700; color: #2ea9d2; line-height: 1.8; } p{ max-width: 340px; font-size: 18px; line-height: 1.8; } } @media screen and (max-width: 768px) { .contents_02{ padding: 80px 5% 100px 5%; margin-bottom: 100px; h2{ margin-bottom: 40px; } } } /*------------------------------------------ #contents_03 ------------------------------------------*/ .contents_bg_03{ } .contents_03{ max-width: 980px; margin: 0 auto 110px auto; border: 10px solid #f1f1f1; position: relative; h2{ position: absolute; left: 50%; top: -65px; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); text-align: center; } .boxLR.top{ padding: 200px 40px 40px 40px; display: -ms-flex; display: flex; justify-content: space-between; .boxL, .boxR{ width: 49%; background: #dbf0f7; position: relative; h3{ width: 210px; padding: 5px; font-size: 21px; font-weight: 700; color: #FFF; text-align: center; background: #2ea9d2; position: absolute; top: -20px; left: 50%; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); } } .boxL{ padding: 60px 30px 40px 30px; .topTxt{ margin-bottom: 20px; text-align: center; } ul{ position: relative; &:after{ content: ""; width: 2px; height: 90%; display: block; background: #2ea9d2; position: absolute; left: 9px; top: 50%; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } li{ position: relative; padding-left: 30px; &:before{ content: ""; width: 20px; height: 20px; display: block; position: absolute; left: 0; top: 50%; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); background: #2ea9d2; border-radius: 100%; } dl{ height: 55px; display: -ms-flex; display: flex; align-items: center; dt{ width: 75px; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 22px; color: #2ea9d2; } dd{ flex: 1; font-size: 18px; &.rest{ color: #e50182; } } } } } } .boxR{ padding: 60px 30px 40px 30px; .topTxt{ margin-bottom: 40px; text-align: center; } ul{ padding: 0 30px; li{ dl{ height: 55px; display: -ms-flex; display: flex; align-items: center; dt{ font-size: 19px; font-weight: 700; color: #2ea9d2; } dd{ width: 100%; font-size: 18px; display: -ms-flex; display: flex; .lineBox{ width: 85px; position: relative; .blue2{ width: 20px; height: 75px; display: block; border-radius: 20px; background: #2ea9d2; position: absolute; left: 15px; top: 3px; } .red{ width: 20px; height: 20px; display: block; border-radius: 100%; background: #e50182; position: absolute; left: 15px; top: 3px; &2{ width: 20px; height: 75px; display: block; border-radius: 20px; background: #e50182; position: absolute; left: 15px; top: 3px; } } } p{ flex: 1; } } } &.rest{ dl{ dt, dd{ color: #e50182; } } } } } } } .check{ padding: 0 40px 40px 40px; h3{ margin-bottom: 40px; font-size: 28px; font-weight: 700; color: #2ea9d2; } ul{ li{ margin-bottom: 30px; display: -ms-flex; display: flex; justify-content: space-between; align-items: center; &:last-child{ margin-bottom: 0; } .num{ padding-top: 5px; float: left; text-align: center; color: #e50182; font-size: 18px; font-weight: 700; font-family: 'Roboto Condensed', sans-serif; line-height: 1; strong{ font-size: 46px; } } .txt{ float: left; padding: 0 0 0 15px; h4{ margin-bottom: 30px; font-size: 22px; font-weight: 700; color: #2ea9d2; } p{ line-height: 1.8; } } } } } } @media screen and (max-width: 768px) { .contents_03{ max-width: 90%; margin: 0 auto 100px auto; border: 5px solid #f1f1f1; position: relative; h2{ position: absolute; left: 50%; top: -30px; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); text-align: center; } .boxLR.top{ padding: 120px 5% 5% 5%; display: block; justify-content: inherit; .boxL, .boxR{ width: 100%; background: #dbf0f7; position: relative; h3{ width: 210px; padding: 5px; font-size: 21px; font-weight: 700; color: #FFF; text-align: center; background: #2ea9d2; position: absolute; top: -20px; left: 50%; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); } } .boxL{ padding: 60px 5% 40px 5%; margin-bottom: 50px; .topTxt{ margin-bottom: 20px; text-align: center; } ul{ position: relative; &:after{ content: ""; width: 2px; height: 90%; display: block; background: #2ea9d2; position: absolute; left: 9px; top: 50%; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } li{ position: relative; padding-left: 30px; &:before{ content: ""; width: 20px; height: 20px; display: block; position: absolute; left: 0; top: 50%; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); background: #2ea9d2; border-radius: 100%; } dl{ min-height: 55px; display: -ms-flex; display: flex; align-items: center; dt{ width: 70px; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 22px; color: #2ea9d2; } dd{ flex: 1; font-size: 16px; &.rest{ color: #e50182; } } } } } } .boxR{ padding: 60px 5% 5% 5%; margin-bottom: 50px; .topTxt{ margin-bottom: 20px; text-align: center; } ul{ padding: 0; li{ dl{ min-height: 55px; display: -ms-flex; display: flex; align-items: center; dt{ font-size: 19px; font-weight: 700; color: #2ea9d2; } dd{ font-size: 16px; display: -ms-flex; display: flex; .lineBox{ width: 55px; position: relative; .blue2{ width: 20px; height: 75px; display: block; border-radius: 20px; background: #2ea9d2; position: absolute; left: 15px; top: 3px; } .red{ width: 20px; height: 20px; display: block; border-radius: 100%; background: #e50182; position: absolute; left: 15px; top: 3px; } } p{ flex: 1; } } } &.rest{ dl{ dt, dd{ color: #e50182; } } } } } } } .check{ padding: 0 5% 5% 5%; h3{ margin-bottom: 40px; font-size: 24px; font-weight: 700; color: #2ea9d2; } ul{ li{ margin-bottom: 50px; display: block; justify-content: inherit; align-items: inherit; &:last-child{ margin-bottom: 0; } .num{ padding-top: 5px; float: left; text-align: center; color: #e50182; font-size: 18px; font-weight: 700; font-family: 'Roboto Condensed', sans-serif; line-height: 1; strong{ font-size: 46px; } } .txt{ float: left; padding: 0 0 20px 0; h4{ margin-bottom: 10px; font-size: 22px; font-weight: 700; color: #2ea9d2; } p{ line-height: 1.8; } } } } } } } /*------------------------------------------ #contents_04 ------------------------------------------*/ .contents_bg_04{ } .contents_04{ margin-bottom: 100px; h2{ margin-bottom: 50px; text-align: center; } .imgBox{ position: relative; h3{ width: 90%; font-size: 31px; font-weight: 700; color: #FFF; text-align: center; position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } p{ padding: 30px; } } @media screen and (max-width: 768px) { .contents_04{ .imgBox{ position: relative; h3{ width: 100%; font-size: 31px; font-weight: 700; color: #FFF; text-align: center; position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } p{ padding: 5% 5% 10% 5%; } } } /*------------------------------------------ #contents_05 ------------------------------------------*/ .contents_bg_05{ background: #e9f6fa; } .contents_05{ padding-bottom: 80px; position: relative; h2{ position: relative; top: -55px; margin-bottom: 20px; } li{ display: -ms-flex; display: flex; justify-content: space-between; padding-bottom: 55px; margin-bottom: 55px; border-bottom: 1px solid #000; &:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .imgBox{ width: 326px; padding: 0 30px; text-align: center; p{ display: inline-block; padding: 25px 0 0 0; text-align: left; } } .txtBox{ padding: 0 30px; flex: 1; dl{ dt{ margin-bottom: 25px; font-size: 20px; font-weight: 700; color: #2ea9d2; } dd{ margin-bottom: 35px; &:last-child{ margin-bottom: 0; } } } } &:nth-child(even){ .imgBox{ order: 2; } .txtBox{ order: 1; } } } } @media screen and (max-width: 980px) { .contents_05{ padding: 0 5% 50px 5%; h2{ position: relative; top: -25px; margin-bottom: 20px; } li{ display: block; padding-bottom: 55px; margin-bottom: 55px; border-bottom: 1px solid #000; &:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .imgBox{ width: 100%; padding: 0 5% 30px 5%;; text-align: center; img{ max-width: 266px; } p{ display: inline-block; padding: 25px 0 0 0; text-align: left; } } .txtBox{ padding: 0 5%; flex: 1; dl{ dt{ margin-bottom: 25px; font-size: 20px; font-weight: 700; color: #2ea9d2; } dd{ margin-bottom: 35px; &:last-child{ margin-bottom: 0; } } } } &:nth-child(even){ .imgBox{ order: 2; } .txtBox{ order: 1; } } } } } /*------------------------------------------ #contents_06 ------------------------------------------*/ .contents_bg_06{ background: url("../img/bg_procedure.jpg") no-repeat center / cover; } .contents_06{ padding: 80px 0 75px 0; h2{ margin-bottom: 50px; .en, .jp{ color: #FFF; } .jp{ border-top: 1px solid #FFF; } } ul{ display: -ms-flex; display: flex; li{ width: 100%; margin-right: 30px; background: #FFF; position: relative; border-radius: 20px; dl{ padding: 25px; dt{ width: 100%; height: 2em; margin-bottom: 25px; font-size: 18px; font-weight: 700; display: table; span{ display: table-cell; text-align: center; vertical-align: middle; } } dd{ font-size: 14px; } } &:after{ content: ""; width: 15px; height: 30px; background: url("../img/arrow_02.png") no-repeat center / 15px; position: absolute; right: -22px; top: 50%; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } &:last-child{ margin-right: 0; background: #e50182; dl{ color: #FFF; } &:after{ content: none; } } } } } @media screen and (max-width: 980px) { .contents_06{ padding: 80px 5% 75px 5%; h2{ margin-bottom: 50px; .en, .jp{ color: #FFF; } .jp{ border-top: 1px solid #FFF; } } ul{ display: block; li{ width: 100%; margin: 0 auto 30px auto; background: #FFF; position: relative; border-radius: 10px; dl{ padding: 25px; dt{ width: 100%; height: 2em; margin-bottom: 25px; font-size: 18px; font-weight: 700; display: table; span{ display: table-cell; text-align: center; vertical-align: middle; } } dd{ font-size: 14px; } } &:after{ content: ""; width: 15px; height: 30px; background: url("../img/arrow_02.png") no-repeat center / 15px; position: absolute; right: inherit; left: 50%; top: inherit; bottom: -30px; -ms-transform: translate(-50%, 0) ; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0) rotate(90deg); } &:last-child{ margin-right: auto; background: #e50182; dl{ color: #FFF; } &:after{ content: none; } } } } } } /* ------------------------------ トップへ戻る ------------------------------ */ #toTop{ position: fixed; right: 0; bottom: 0; display: none; z-index: 2; } #toTop a:hover{ opacity: 0.8; } @media screen and (max-width: 768px) { #toTop img{ width: 50px; } } /*------------------------------------------ footer ------------------------------------------*/ footer{ padding: 90px 0; position: relative; } footer a{ color: #000; &:hover{ text-decoration: underline; } } footer #links{ float: right; font-size: 12px; a{ display: inline-block; } } footer #copy{ float: left; font-size: 12px; } @media screen and (max-width: 768px) { footer{ padding: 25px 0; text-align: center; } footer #links{ margin-bottom: 10px; float: inherit; } footer #copy{ font-size: 12px; float: inherit; } }