@charset "UTF-8"; /* Scss Document */ /* Scss Document */ /*--------------- 追加 reset ---------------*/ *, *::before, *::after { -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } a { color: inherit; text-decoration: none; } a:visited { color: inherit; } li { list-style: none; } /*--------------- 共通 ---------------*/ html { font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } body { width: 100%; max-width: 1920px; min-width: 1200px; margin: 0 auto; color: #000; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; -webkit-font-feature-settings: "halt" on; font-feature-settings: "halt" on; font-weight: 400; font-size: 1.6rem; font-style: normal; line-height: 1.7; -webkit-font-feature-settings: "palt"; -ms-font-feature-settings: "palt"; -o-font-feature-settings: "palt"; font-feature-settings: "palt"; } @media only screen and (max-width: 640px) { body { min-width: 100%; font-size: 3.75vw; } } a:hover { opacity: 0.6; -webkit-transition: 0.5s; transition: 0.5s; } img { width: auto; max-width: 100%; height: auto; max-height: 100%; vertical-align: bottom; } section { scroll-margin-top: 170px; } @media only screen and (max-width: 640px) { section { scroll-margin-top: 53.125vw; } } .inner { width: 100%; max-width: 1200px; min-width: 1200px; margin: 0 auto; padding: 0 30px; } @media only screen and (max-width: 640px) { .inner { width: 100%; min-width: 100%; padding: 0 calc(30 / 640 * 100vw); } } .inner._w { max-width: 1920px; padding: 0 40px; } @media only screen and (max-width: 640px) { .inner._w { max-width: 100%; padding: 0 calc(30 / 640 * 100vw); } } .inner._m { max-width: 1600px; padding: 0 40px; } @media only screen and (max-width: 640px) { .inner._m { max-width: 100%; padding: 0 calc(30 / 640 * 100vw); } } .inner._s { max-width: 1200px; padding: 0 30px; } @media only screen and (max-width: 640px) { .inner._s { max-width: 100%; padding: 0 calc(30 / 640 * 100vw); } } .inner._xs { max-width: 1010px; padding: 0 30px; } @media only screen and (max-width: 640px) { .inner._xs { max-width: 100%; padding: 0 calc(30 / 640 * 100vw); } } .flex_wrap { -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: -webkit-box; display: flex; -moz-align-items: flex-start; -ms-align-items: flex-start; -o-align-items: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /*--------------- テキスト関係 ---------------*/ .p { /*　基本のテキスト　*/ /*　に設定のもの font-size: 1.6rem; letter-spacing: .1em; text-indent: .1em; line-height: 1.8; @include css3(font-feature-settings, "palt"); @include sp { min-width: 100%; font-size: calc((24/640)*100vw); } */ } .p_center { text-align: center !important; } .p_pc_center { text-align: center !important; } @media only screen and (max-width: 640px) { .p_pc_center { text-align: left !important; } } .left { text-align: left !important; } .center { text-align: center; } /*--------------- header ---------------*/ .header { position: relative; z-index: 1000; width: 100%; max-width: 1920px; height: 180px; background: #fff; padding-top: 2.9rem; padding-bottom: 1.5rem; } @media only screen and (max-width: 640px) { .header { position: fixed; top: 0; left: 0; height: calc(170 / 640 * 100vw); padding: 0 0 calc(14 / 640 * 100vw); } } .header.scrolled { backdrop-filter: blur(1px); } .header.scrolled .gnav_menu { border-bottom: 1px solid #000; } .header.scrolled a { color: #000; } @media only screen and (max-width: 1200px) { .header.scrolled a { color: inherit !important; } } @media only screen and (max-width: 640px) { .header.scrolled a { color: inherit !important; } } .header .header_container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 640px) { .header .header_container { margin-top: calc(22 / 640 * 100vw); } } .header_logo01 { width: 18.1578947368%; } @media only screen and (max-width: 640px) { .header_logo01 { display: none; } } .header_logo02 { width: 19.1228070175%; margin-left: 170px; } @media only screen and (max-width: 640px) { .header_logo02 { width: calc(218 / 640 * 100vw); margin-left: 0; z-index: 100; } } .select { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 7px; } @media only screen and (max-width: 640px) { .select { display: none; } } @media only screen and (max-width: 640px) { .select_item { display: none; } } .select_item a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; font-size: 1.4rem; font-weight: 700; line-height: normal; background: #686868; border-radius: 5px; padding: 8px 21px; } .select_item a img { width: 14px; height: 14px; margin-right: 7px; } .select_item-contact a img { width: 17px; height: 17px; margin-top: 1px; } .header_menu-sp { display: none; } @media only screen and (max-width: 640px) { .header_menu-sp { display: block; } } .header_menu-sp-01 img { width: calc(66 / 640 * 100vw); } .header_menu-sp-02 { margin-left: calc(15 / 640 * 100vw); margin-right: calc(22 / 640 * 100vw); } .header_menu-sp-02 img { width: calc(53 / 640 * 100vw); } .header_menu-sp-03 img { width: calc(40 / 640 * 100vw); } .header.open .header_container { position: relative; } @media only screen and (max-width: 640px) { .header.open .header_container-botttom { -webkit-transform: translateX(0); transform: translateX(0); } } .header.open .header_menu-sp { display: none; } @media only screen and (max-width: 640px) { .header.open .select { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 100; } } @media only screen and (max-width: 640px) { .header.open .terms { margin-left: calc(100 / 640 * 100vw); } } @media only screen and (max-width: 640px) { .header.open .language { display: block; margin-bottom: calc(-140 / 640 * 100vw); } } .header_container-botttom { margin-top: 1.8rem; } @media only screen and (max-width: 640px) { .header_container-botttom { position: fixed; top: calc(30 / 640 * 100vw); left: 0; width: 100%; height: 100vh; background: #fff; margin-top: calc(30 / 640 * 100vw); -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } } .header_container-botttom .google_translate_element_2 { height: 100%; } .header_nav .header_menu-sp { display: none; } @media only screen and (max-width: 640px) { .header_nav .header_menu-sp { display: block !important; text-align: right; margin-right: calc(22 / 640 * 100vw); margin-top: calc(40 / 640 * 100vw); } } .header_nav .header_logo01 { margin: calc(30 / 640 * 100vw) auto; width: calc(220 / 640 * 100vw); } .header_nav .select { display: none; } @media only screen and (max-width: 640px) { .header_nav .select { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (max-width: 640px) { .header_nav_wrapper { border-radius: 20px; border: 4px solid #000; width: calc(580 / 640 * 100vw); margin: calc(80 / 640 * 100vw) auto 0; } } .header_nav_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-left: 2px solid #e6e6e6; } @media only screen and (max-width: 640px) { .header_nav_list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: calc(21 / 640 * 100vw); border-left: none; margin-top: calc(50 / 640 * 100vw); } } .header_nav_item { color: #3a3a3a; text-align: center; font-weight: 700; line-height: normal; padding: 0 2rem; border-right: 2px solid #e6e6e6; position: relative; } @media only screen and (max-width: 640px) { .header_nav_item { font-size: calc(30 / 640 * 100vw); border-right: none; text-align: left; color: #E60012; padding-left: calc(86 / 640 * 100vw); position: relative; } .header_nav_item::before { content: ""; position: absolute; background: url("../image/common/icon-arrow.png") no-repeat center center; background-size: contain; width: calc(22 / 640 * 100vw); height: calc(29 / 640 * 100vw); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 8%; } .header_nav_item:nth-child(4)::before { top: 18%; } .header_nav_item:nth-child(5)::before { top: 28%; } } .header_nav_item ul { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center top; transform-origin: center top; -webkit-transition: all 0.3s; transition: all 0.3s; position: absolute; top: 100%; left: 0; z-index: 10; margin-top: 5px; } @media only screen and (max-width: 640px) { .header_nav_item ul { display: none !important; } } .header_nav_item:hover { opacity: 0.9; } .header_nav_item:hover > ul { -webkit-transform: scaleY(1); transform: scaleY(1); } .dropdown__list { background: #fff; border: 1px solid #c9c9c9; color: #000; font-weight: 400; white-space: nowrap; width: 20rem; padding: 5px 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .breadcrumb_nav { margin-top: 3px; } .breadcrumb_nav li::before { color: #000; } .breadcrumb_nav li:first-child::before { content: ">" !important; } .breadcrumb_nav a { color: #000; font-size: calc(24 / 640 * 100vw); line-height: 1.8; text-decoration: none !important; } .drawer_select { display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center; margin-top: calc(30 / 640 * 100vw); } .drawer_select_item { display: inline-block; } .drawer_select_item a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 5px; background: #686868; padding: calc(10 / 640 * 100vw) calc(20 / 640 * 100vw) calc(12 / 640 * 100vw); } .drawer_select_item a p { color: #fff; font-size: calc(20 / 640 * 100vw); font-weight: 700; line-height: normal; } .drawer_select_item img { margin-right: calc(10 / 640 * 100vw); } .drawer_select_contact { width: calc(21 / 640 * 100vw); height: calc(21 / 640 * 100vw); } .drawer_select_terms { width: calc(19 / 640 * 100vw); height: calc(19 / 640 * 100vw); } .drawer__info { text-align: center; margin-top: calc(10 / 640 * 100vw); } .drawer__info-name { font-size: calc(32 / 640 * 100vw); font-weight: 700; } .drawer__info-address { font-size: calc(20 / 640 * 100vw); font-weight: 700; } .drawer__info-tel { font-size: calc(32 / 640 * 100vw); font-weight: 700; } .header_logo03 { margin: 0 auto; width: calc(242 / 640 * 100vw); } .change_header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; padding-bottom: 2rem; background: #fff; padding-top: 3.5rem; -webkit-transform: translateY(-100%); transform: translateY(-100%); } @media only screen and (max-width: 640px) { .change_header { display: none; } } .change_header.is-fixed { -webkit-transform: translateY(0); transform: translateY(0); } .change_header .header_container-botttom { margin-top: 0; } .announce { background: #ffcc01; padding: 6px 0 7px; overflow: hidden; } @media only screen and (max-width: 640px) { .announce { padding: calc(8 / 640 * 100vw) 0 calc(8 / 640 * 100vw); } } .announce p { font-size: 1.4rem; line-height: normal; white-space: nowrap; display: inline-block; -webkit-animation: marquee 10s linear infinite; animation: marquee 10s linear infinite; } @media only screen and (max-width: 640px) { .announce p { font-size: calc(24 / 640 * 100vw); overflow: hidden; white-space: nowrap; -webkit-animation: marquee-sp 10s linear infinite; animation: marquee-sp 10s linear infinite; } } @-webkit-keyframes marquee { 0% { /* 開始時: 右端（親要素の外側）に配置 */ -webkit-transform: translateX(300%); transform: translateX(300%); } 100% { /* 終了時: 左端（テキストの幅分左に移動） */ -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes marquee { 0% { /* 開始時: 右端（親要素の外側）に配置 */ -webkit-transform: translateX(300%); transform: translateX(300%); } 100% { /* 終了時: 左端（テキストの幅分左に移動） */ -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes marquee-sp { 0% { /* 開始時: 右端（親要素の外側）に配置 */ -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { /* 終了時: 左端（テキストの幅分左に移動） */ -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes marquee-sp { 0% { /* 開始時: 右端（親要素の外側）に配置 */ -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { /* 終了時: 左端（テキストの幅分左に移動） */ -webkit-transform: translateX(-100%); transform: translateX(-100%); } } /*--------------- main ---------------*/ .c-ttl { text-align: center; color: #fff; font-weight: 700; } .c-ttl_en { display: block; font-size: 4.8rem; } @media only screen and (max-width: 640px) { .c-ttl_en { font-size: calc(48 / 640 * 100vw); } } .c-ttl_en._blue { color: #015CAC; } .c-ttl_jp { display: block; font-size: 2rem; margin-top: -7px; } @media only screen and (max-width: 640px) { .c-ttl_jp { font-size: calc(24 / 640 * 100vw); margin-top: -sppx(8); } } .c-ttl_jp._black { color: #000; } .breadcrumb ol { font-size: 1.6rem; font-weight: 400; font-family: "Noto Sans JP"; } @media only screen and (max-width: 640px) { .breadcrumb ol { font-size: calc(20 / 640 * 100vw); } } .breadcrumb li { display: inline-block; } .breadcrumb li:before { content: ">"; margin: 0 0.5em; } .breadcrumb li:first-child:before { content: none; } .breadcrumb li a { text-decoration: underline; } .breadcrumb li a:hover { text-decoration: none; } /*--------------- footer ---------------*/ .link .content { padding-top: 4.1rem; padding-bottom: 8rem; } @media only screen and (max-width: 640px) { .link .content { padding: calc(47 / 640 * 100vw) 0; } } .link__sns { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2.2rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (max-width: 640px) { .link__sns { gap: calc(24 / 640 * 100vw); } } .link__sns a { width: 5.4rem; height: 5.4rem; } @media only screen and (max-width: 640px) { .link__sns a { width: calc(60 / 640 * 100vw); } } .link__body { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 5.5rem; } @media only screen and (max-width: 640px) { .link__body { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: calc(47 / 640 * 100vw); } } .link__body ul { margin-right: 5rem; width: 6.7543859649%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 7px; } @media only screen and (max-width: 640px) { .link__body ul { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-right: 0; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 4px; } } .link__body ul li { font-size: 1.5rem; font-weight: 500; line-height: 2.16; border-radius: 100vh; background: #ebebeb; text-align: center; width: 100px; } @media only screen and (max-width: 640px) { .link__body ul li { font-size: calc(16 / 640 * 100vw); width: calc(100 / 640 * 100vw); } } .link__img { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2rem; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (max-width: 640px) { .link__img { gap: calc(10 / 640 * 100vw); margin-top: calc(18 / 640 * 100vw); display: grid; grid-template-columns: repeat(2, 1fr); } } .link__img a { width: 23.4945705824%; } @media only screen and (max-width: 640px) { .link__img a { width: 100%; } .link__img a img { width: 100%; } } .link__body-bottom { -webkit-box-align: start; -ms-flex-align: start; align-items: start; margin-top: 8.6rem; } @media only screen and (max-width: 640px) { .link__body-bottom { margin-top: calc(30 / 640 * 100vw); } } .footer .content { background: #015CAC; padding-top: 5.6rem; padding-bottom: 3rem; border-top: 3px solid #000; border-bottom: 3px solid #000; } @media only screen and (max-width: 640px) { .footer .content { padding: calc(55 / 640 * 100vw) 0 calc(26 / 640 * 100vw); } } .footer__top { color: #fff; padding-bottom: 3rem; border-bottom: 1px solid #fff; } @media only screen and (max-width: 640px) { .footer__top { display: none; } } .footer__nav { display: -webkit-box; display: -ms-flexbox; display: flex; } .footer__nav-main { margin-right: 6rem; } .footer__nav-main ul li { font-size: 1.4rem; font-weight: 700; line-height: 1.4; margin-top: 1rem; padding-left: 1.4rem; position: relative; } .footer__nav-main ul li::before { content: ""; position: absolute; background: url("../image/common/Polygon01.png") no-repeat center center; background-size: contain; width: 7px; height: 8px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; } .footer__nav-main ul .position::before { -webkit-transform: translateY(-220%); transform: translateY(-220%); } .footer__nav-sub { margin-right: 13rem; } .footer__nav-sub th { display: block; font-size: 1.4rem; font-weight: 700; line-height: 2.16; text-align: left; margin-bottom: 0.2rem; position: relative; } .footer__nav-sub th::before { content: ""; position: absolute; background: url("../image/common/Polygon01.png") no-repeat center center; background-size: contain; width: 7px; height: 8px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -1rem; } .footer__nav-sub td { display: block; font-size: 1.2rem; line-height: 1.86; } .footer__nav-sub table + table { margin-top: 1rem; } .footer__nav-sub .footer__nav-main { margin-right: 0; margin-top: 1.3rem; } .footer__bottom { margin-top: 4.1rem; color: #fff; text-align: center; } @media only screen and (max-width: 640px) { .footer__bottom { margin-top: 0; } } .footer__bottom h2 { margin-top: 2.3rem; font-size: 2rem; font-weight: 700; } @media only screen and (max-width: 640px) { .footer__bottom h2 { font-size: calc(32 / 640 * 100vw); margin-top: calc(11 / 640 * 100vw); } } .footer__bottom .address { font-size: 1.4rem; font-weight: 700; line-height: 2.16; } @media only screen and (max-width: 640px) { .footer__bottom .address { font-size: calc(20 / 640 * 100vw); } } .footer__bottom a { font-size: 2rem; font-weight: 700; line-height: 2.16; } @media only screen and (max-width: 640px) { .footer__bottom a { font-size: calc(32 / 640 * 100vw); line-height: normal; } } .footer__logo { width: 19.1228070175%; margin: 0 auto; } @media only screen and (max-width: 640px) { .footer__logo { width: calc(218 / 640 * 100vw); } } .footer-info .content { background: rgba(255, 204, 1, 0.15); padding: 5.2rem 0 2rem; color: #015CAC; } @media only screen and (max-width: 640px) { .footer-info .content { padding: calc(10 / 640 * 100vw) 0 calc(17 / 640 * 100vw); } } .footer-info__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; margin-top: 2.1rem; padding-bottom: 1.8rem; } @media only screen and (max-width: 640px) { .footer-info__wrapper { display: none; } .footer-info__wrapper.is-open { display: block; margin-top: 0; } } .footer-info__wrapper:first-child { padding-bottom: 3.9rem; border-bottom: 1px solid; } @media only screen and (max-width: 640px) { .footer-info__wrapper:first-child { padding-bottom: 0; } } .footer-info__wrapper h3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 10rem; width: 15.7894736842%; } @media only screen and (max-width: 640px) { .footer-info__wrapper h3 { width: 100%; margin-right: 0; } } .footer-info__wrapper h3 span { font-size: 2rem; font-weight: 400; line-height: 2.16; margin-left: 0.9rem; } @media only screen and (max-width: 640px) { .footer-info__wrapper h3 span { font-size: calc(28 / 640 * 100vw); } } .footer-info__wrapper ._left { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media only screen and (max-width: 640px) { .footer-info__wrapper ._left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .footer-info__wrapper ._left span { margin-left: 1.3rem; } .footer-info__list { width: 23.6842105263%; margin-right: 14rem; } @media only screen and (max-width: 640px) { .footer-info__list { width: 100%; } } .footer-info__item { padding-left: 1.7rem; position: relative; } .footer-info__item::before { content: ""; position: absolute; background: url("../image/common/Polygon02.png") no-repeat center center; background-size: contain; width: 7px; height: 8px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; } .footer-info__item a { font-size: 1.4rem; line-height: 2.49; } .footer-info__sp { font-size: calc(20 / 640 * 100vw); font-weight: 700; line-height: 2.16; position: relative; } .footer-info__sp::after { content: ""; position: absolute; background: url("../image/index/arrow-icon01.png") no-repeat center center; background-size: contain; width: calc(10 / 640 * 100vw); height: calc(20 / 640 * 100vw); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: calc(20 / 640 * 100vw); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .footer-info__sp.is-active { margin-bottom: calc(20 / 640 * 100vw); } .footer-info__sp.is-active::after { -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } .footer__copy { text-align: right; font-size: 1.2rem; line-height: 2.49; } @media only screen and (max-width: 640px) { .footer__copy { display: none; } } .footer__copy-sp { display: none; } @media only screen and (max-width: 640px) { .footer__copy-sp { display: block; background: #fff; color: #015CAC; text-align: center; font-size: calc(16 / 640 * 100vw); line-height: 2.49; padding: calc(17 / 640 * 100vw) 0; } }