@charset "UTF-8"; /* Scss Document */ /* Scss Document */ /*--------------- 追加 reset ---------------*/ *, *::before, *::after { -webkit-box-sizing: border-box; -moz-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; } a.-uline { text-decoration: underline; } li { list-style: none; } .-dot li { padding-left: 1em; position: relative; } .-dot li::before { content: "・"; display: block; position: absolute; left: 0; top: 0; } /*--------------- 共通 ---------------*/ html { font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { width: 100%; margin: 0 auto; color: #333; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-feature-settings: "halt" on; font-weight: 400; font-size: 1.6rem; font-style: normal; line-height: 1.5; letter-spacing: 0.05em; -webkit-font-feature-settings: "palt"; -moz-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; transition: 0.5s; } a.-anchor { color: #244abd; text-decoration: underline; } img { width: auto; max-width: 100%; height: auto; max-height: 100%; vertical-align: bottom; } .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: 117rem; min-width: auto; padding: 0 3remx; } @media only screen and (max-width: 640px) { .inner._m { 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: flex; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -o-align-items: flex-start; align-items: flex-start; justify-content: space-between; } /*--------------- テキスト関係 ---------------*/ .p { /*　基本のテキスト　*/ /*　に設定のもの font-size: 1.6rem; line-height: 1.5; @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; } .right { text-align: right !important; } .center { text-align: center; } .notes { font-size: 1.5rem; } @media only screen and (max-width: 640px) { .notes { font-size: calc(18 / 640 * 100vw); } } @keyframes marquee { 0% { /* 開始時: 右端（親要素の外側）に配置 */ transform: translateX(300%); } 100% { /* 終了時: 左端（テキストの幅分左に移動） */ transform: translateX(-100%); } } @keyframes marquee-sp { 0% { /* 開始時: 右端（親要素の外側）に配置 */ transform: translateX(100%); } 100% { /* 終了時: 左端（テキストの幅分左に移動） */ transform: translateX(-100%); } } /*--------------- main ---------------*/ .c-ttl__wide { background-color: #5598DD; color: #fff; font-size: 2rem; font-weight: bold; text-align: center; padding: 0.4rem 0 0.8rem; } .c-ttl { background-color: #5598DD; color: #fff; font-size: 2rem; font-weight: bold; text-align: center; padding: 0.4rem 0 0.8rem; width: 56.7rem; margin: 0 auto; isolation: isolate; } @media only screen and (max-width: 640px) { .c-ttl { width: 80%; } } .c-ttl_l { width: 65.4rem; } @media only screen and (max-width: 1600px) { .c-ttl_l { width: 56.7rem; } } @media only screen and (max-width: 640px) { .c-ttl_l { width: 80%; } } .c-body__container { padding-top: 1.5rem; background-color: #FBFBE7; padding: 3.6rem 4.4rem 2.4rem; margin-top: -2rem; z-index: -1; } @media only screen and (max-width: 640px) { .c-body__container { padding: calc(36 / 640 * 100vw) calc(20 / 640 * 100vw) calc(24 / 640 * 100vw); } } .c-block { border-bottom: 1px solid #b78f5b; padding: 2.5rem 0; } .c-block:last-child { border-bottom: none; } .c-block__ttl { text-align: center; color: #FE0031; font-size: 2.2rem; font-weight: 700; } @media only screen and (max-width: 640px) { .c-block__ttl { font-size: calc(26 / 640 * 100vw); } } .c-block__container { padding: 0 1.5rem; } @media only screen and (max-width: 640px) { .c-block__container { padding: 0 calc(15 / 640 * 100vw); } } .c-sttl { text-align: center; } .c-sttl h3, .c-sttl p { color: #5598DD; font-size: 1.8rem; font-weight: 500; border: 1px solid #5598DD; border-radius: 100vw; width: 18.7rem; padding: 0.4rem 0; margin: 0 auto; } .c-button a { display: block; text-align: center; font-size: 1.8rem; color: #5598DD; background-color: #fff; border: 1px solid #5598DD; border-radius: 100vw; width: 37.5rem; margin: 0 auto; padding: 0.3rem 0 0.7rem; } @media only screen and (max-width: 640px) { .c-button a { width: 90%; height: 4.7rem; padding: 0; line-height: 4.7rem; } } /*--------------- footer ---------------*/ .footer .content { background: #5598DD; padding: 1em; text-align: center; color: #fff; } .footer .copyright { font-size: calc(16 / 1920 * 100vw); } @media only screen and (max-width: 640px) { .footer .copyright { font-size: calc(16 / 640 * 100vw); } } .anchor { margin-top: -124px; padding-top: 124px; } .page__nav { margin-bottom: 9rem; } @media only screen and (max-width: 640px) { .page__nav { margin-bottom: calc(50 / 640 * 100vw); } } .animation { opacity: 0; } .isFade { opacity: 0; position: relative; bottom: -3em; } .isFade.isPlay { animation: fadein 1s cubic-bezier(0.07, 0.64, 0.3, 0.94) forwards; } @keyframes fadein { 0% { opacity: 0; bottom: -3em; } 100% { opacity: 1; bottom: 0; } } .fade-in-up { opacity: 0; transform: translateY(24px); transition: opacity 2s, transform 1s; } .fade-in-up.is-in-view { opacity: 1; transform: translateY(0); } .fade-in-down { opacity: 0; transform: translateY(-24px); transition: opacity 2s, transform 1s; } .fade-in-down.is-in-view { opacity: 1; transform: translateY(0); } .fade-in { opacity: 0; transition: opacity 1s; } .fade-in.is-in-view { opacity: 1; } /*--------------- mv ---------------*/ .mv__img img { max-width: initial; width: 100%; } .mv__txt { background: #FFFCC9; } .mv__txt p { font-size: 3.8rem; font-weight: 700; text-align: center; padding: 1.6rem 0 1.8rem; } @media only screen and (max-width: 1600px) { .mv__txt p { font-size: calc(30 / 1600 * 100vw); } } @media only screen and (max-width: 640px) { .mv__txt p { font-size: calc(32 / 640 * 100vw); padding: calc(16 / 640 * 100vw) 0 calc(18 / 640 * 100vw); } } /*--------------- page nav ---------------*/ .nav { background-color: #5598DD; } @media only screen and (max-width: 640px) { .nav .inner._m { padding: 0; } } .nav__list { display: flex; align-items: center; justify-content: center; } @media only screen and (max-width: 640px) { .nav__list { align-items: baseline; } } .nav__item { width: 33.3333333333%; height: 9rem; border-right: 4px dotted #fff; } @media only screen and (max-width: 958px) { .nav__item { height: calc(145 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .nav__item { width: calc(265 / 640 * 100vw); height: calc(145 / 640 * 100vw); } } @media only screen and (max-width: 640px) { .nav__item p { margin-top: calc(16 / 640 * 100vw); } } .nav__item:first-child { border-left: 4px dotted #fff; } @media only screen and (max-width: 640px) { .nav__item:first-child { border-left: none; } } @media only screen and (max-width: 640px) { .nav__item:first-child p { margin-top: calc(5 / 640 * 100vw); } } @media only screen and (max-width: 640px) { .nav__item:last-child { border-right: none; } } .nav__item a { display: flex; align-items: center; justify-content: center; height: 9rem; } @media only screen and (max-width: 958px) { .nav__item a { height: calc(145 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .nav__item a { flex-direction: column; height: auto; vertical-align: top; padding: calc(20 / 640 * 100vw) 0; line-height: normal; } } .nav__item p { font-size: 2rem; color: #fff; font-weight: 700; line-height: 1.2; } @media only screen and (max-width: 958px) { .nav__item p { font-size: calc(24 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .nav__item p { font-size: calc(22 / 640 * 100vw); text-align: center; } } .nav__item-img { height: 6rem; aspect-ratio: 1/1; margin-right: 2rem; } @media only screen and (max-width: 640px) { .nav__item-img { width: calc(46 / 640 * 100vw); height: calc(50 / 640 * 100vw); margin-right: 0; } } .nav__item-img img { width: 100%; } .text-lead { margin-bottom: 2em; font-size: 2rem; text-align: center; } @media only screen and (max-width: 640px) { .text-lead { font-size: calc(24 / 640 * 100vw); text-align: left; } .text-lead br { display: none; } .text-lead span { display: block; } } .title-large { margin: 0 auto -1.5em; padding: 0.35em; border-radius: 0.8rem; display: flex; align-items: center; justify-content: center; width: 82%; background-color: #5598DD; background-image: url("../image/deco_ribbon_l.png"), url("../image/deco_ribbon_r.png"); background-repeat: no-repeat, no-repeat; background-position: left top, right bottom; color: #fff; font-size: 2.8rem; text-align: center; font-weight: 700; line-height: 1.2; position: relative; z-index: 1; } @media only screen and (max-width: 640px) { .title-large { margin: 0 auto -1em; width: calc(480 / 640 * 100vw); font-size: calc(28 / 640 * 100vw); background-size: calc(40 / 640 * 100vw), calc(40 / 640 * 100vw); } } .title-large.-pink { background-color: #FA7A93; } .title-large.-skyblue { background-color: #00C8E1; } .title__item-img { height: 5rem; aspect-ratio: 1/1; margin-right: 2rem; } @media only screen and (max-width: 640px) { .title__item-img { width: calc(50 / 640 * 100vw); height: calc(50 / 640 * 100vw); margin-right: calc(10 / 640 * 100vw); } } .title__item-img img { width: 100%; } .frame { padding: 9.5rem 6.5rem 6.5rem; border-radius: 1.6rem; background: #fff; position: relative; z-index: 0; } @media only screen and (max-width: 640px) { .frame { padding: calc(60 / 640 * 100vw) calc(30 / 640 * 100vw) calc(30 / 640 * 100vw); } } .frame.-pink { text-align: center; background: rgba(250, 122, 147, 0.1); } .frame.-pink .category { border-radius: 0.8rem; padding: 0.5em 1em; background: #FA7A93; color: #fff; } .frame.-blue { text-align: center; background: rgba(85, 151, 221, 0.1); } .btn-application { margin: 6.4rem auto 0; width: 65.7657657658%; } @media only screen and (max-width: 640px) { .btn-application { margin: calc(60 / 640 * 100vw) auto 0; width: 100%; } } .btn-application a { padding: 0.75em 2em 0.75em 0.75em; display: flex; justify-content: center; gap: 2.4rem; border-radius: 16px; border: 3px solid #203D8A; background: #F8EF53 url(../image/arrow_navy.svg) no-repeat right 3.2rem center; box-shadow: 4px 4px 0 0 #203D8A; font-size: 3.2rem; font-weight: 700; color: #203D8A; } @media only screen and (max-width: 640px) { .btn-application a { font-size: calc(28 / 640 * 100vw); background: #F8EF53 url(../image/arrow_navy.svg) no-repeat right calc(20 / 640 * 100vw) center; background-size: calc(24 / 640 * 100vw) auto; gap: calc(16 / 640 * 100vw); } } .btn-application a span { padding: 0.25em 1em; border-radius: 0.8rem; background: #fff; font-size: 2.4rem; } @media only screen and (max-width: 640px) { .btn-application a span { font-size: calc(20 / 640 * 100vw); } } .btn-external a { font-weight: 600; color: #203D8A; text-decoration: underline; } .btn-external a img { margin-right: 0.75em; width: 1.8rem; vertical-align: middle; } .content { padding: 9.6rem 0; } @media only screen and (max-width: 640px) { .content { padding: calc(60 / 640 * 100vw) 0; } } /*--------------- outline ---------------*/ .outline .content { background-color: #E5F9FC; background-image: url("../image/bg_content.png"), url("../image/bg_content.png"); background-repeat: repeat-y, repeat-y; background-position: left -13rem top, right -13rem top; } @media only screen and (max-width: 640px) { .outline .content { background-size: 40%, 40%; background-position: left calc(-80 / 640 * 100vw) top, right calc(-80 / 640 * 100vw) top; } } .outline__table { display: flex; flex-direction: column; gap: 3.6rem; } .outline__table dl { display: flex; align-items: flex-start; font-size: 2rem; gap: 3.6rem; } @media only screen and (max-width: 640px) { .outline__table dl { flex-direction: column; gap: calc(10 / 640 * 100vw); font-size: calc(20 / 640 * 100vw); } } .outline__table dl dt { padding: 0.2em; border-radius: 0.8rem; background: #00C8E1; color: #fff; width: 18rem; text-align: center; font-weight: 700; } @media only screen and (max-width: 640px) { .outline__table dl dt { width: 100%; } } .outline__table dl dd { width: 79rem; } @media only screen and (max-width: 640px) { .outline__table dl dd { width: 100%; } } .outline__table dl dd em { font-weight: 700; } .citizen .content { padding-bottom: 0; } .title_large { margin-bottom: 1em; font-size: 2.4rem; } @media only screen and (max-width: 640px) { .title_large { font-size: calc(24 / 640 * 100vw); } } .title_middle { margin-bottom: 1em; padding-bottom: 0.75em; font-size: 2rem; border-bottom: solid 2px #eee; position: relative; } @media only screen and (max-width: 640px) { .title_middle { font-size: calc(22 / 640 * 100vw); } } .title_middle::before { content: ""; position: absolute; left: 0; bottom: -0.2rem; border-bottom: solid 2px #00C8E1; width: 3em; height: 0.2rem; } .title_small { margin-bottom: 1em; font-size: 1.8rem; } @media only screen and (max-width: 640px) { .title_small { font-size: calc(20 / 640 * 100vw); } } .title_small::before { content: "●"; margin-right: 0.25em; } .title_xsmall { margin-bottom: 1em; font-size: 1.8rem; } @media only screen and (max-width: 640px) { .title_xsmall { font-size: calc(20 / 640 * 100vw); } } .citizen .title_small::before { color: #FA7A93; } .business .title_small::before { color: #00C8E1; } .call-center { margin-top: 2em; padding: 5.6rem; border: solid 4px #5598DD; border-radius: 1.6rem; text-align: center; font-weight: 500; font-size: 2.4rem; } @media only screen and (max-width: 640px) { .call-center { padding: calc(32 / 640 * 100vw) calc(24 / 640 * 100vw); font-size: calc(16 / 640 * 100vw); } } .call-center a { font-size: 3.2rem; color: #203D8A; } @media only screen and (max-width: 640px) { .call-center a { font-size: calc(28 / 640 * 100vw); } } .call-center span { display: block; font-size: 1.6rem; } @media only screen and (max-width: 640px) { .call-center span { font-size: calc(16 / 640 * 100vw); } } .call-center.-small { margin-top: 1em; padding: 2rem; font-size: 1.8rem; } @media only screen and (max-width: 640px) { .call-center.-small { padding: calc(16 / 640 * 100vw) calc(12 / 640 * 100vw); font-size: calc(16 / 640 * 100vw); } } .call-center.-small a { margin: 0.25em 0; font-size: 2.8rem; color: #203D8A; display: block; } @media only screen and (max-width: 640px) { .call-center.-small a { font-size: calc(26 / 640 * 100vw); } } .call-center.-small span { display: block; font-size: 1.8rem; } @media only screen and (max-width: 640px) { .call-center.-small span { font-size: calc(16 / 640 * 100vw); } } .accordion { margin-top: 2.4rem; } @media only screen and (max-width: 640px) { .accordion { margin-top: calc(24 / 640 * 100vw); } } .accordion_btn { padding: 0.5em 1em; background: #fff; border: solid 3px #203D8A; border-radius: 1.6rem; text-align: left; font-size: 2.8rem; box-shadow: 0.4rem 0.4rem 0 0 #203D8A; position: relative; } @media only screen and (max-width: 640px) { .accordion_btn { border-radius: calc(16 / 640 * 100vw); font-size: calc(24 / 640 * 100vw); box-shadow: calc(3 / 640 * 100vw) calc(3 / 640 * 100vw) 0 0 #203D8A; } } .accordion_btn::after { content: "＋"; position: absolute; right: 0.5em; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 3rem; } @media only screen and (max-width: 640px) { .accordion_btn::after { font-size: calc(30 / 640 * 100vw); font-weight: 600; } } .accordion_btn.-open::after { content: "－"; } .accordion_btn.coming { opacity: 0.2; } .accordion_btn.coming::after { right: 1em; content: "Coming soon"; font-size: 2rem; font-weight: bold; } .accordion_btn.application { border: solid 3px #FE0031; box-shadow: 0.4rem 0.4rem 0 0 #FE0031; } @media only screen and (max-width: 640px) { .accordion_btn.application { box-shadow: calc(3 / 640 * 100vw) calc(3 / 640 * 100vw) 0 0 #FE0031; } } .accordion_main { margin-top: 2.4rem; padding: 2.5em; display: none; text-align: left; background: #fff; border-radius: 1.6rem; text-align: left; } @media only screen and (max-width: 640px) { .accordion_main { margin-top: calc(24 / 640 * 100vw); padding: 1.25em; border-radius: calc(16 / 640 * 100vw); font-size: calc(20 / 640 * 100vw); } } .accordion_main p { margin-bottom: 1.5em; } .accordion_main ul { margin-bottom: 1.5em; } .accordion_main ul li { margin-left: 1.5em; list-style: disc; } .accordion_main ul.list-style-none li { margin-left: 0; list-style: none; } .table_item { margin-bottom: 1.5em; width: 100%; } .table_item th, .table_item td { padding: 1em 1.5em; border: solid 1px #ddd; line-height: 1.4; } @media only screen and (max-width: 640px) { .table_item th, .table_item td { padding: 0.75em 0.75em; font-size: calc(18 / 640 * 100vw); } } .table_item th { font-weight: 700; background: #FFFCC9; } .table_item td { background: #fff; } .table_item .-w10 { width: 10%; } .table_item .-w15 { width: 15%; } .table_item .-w20 { width: 20%; } .table_item .-w25 { width: 25%; } .table_item .-w33 { width: 33.3333333333%; } .table_item .-w40 { width: 40%; } .table_item .-w50 { width: 50%; } .table_item .-w55 { width: 55%; } .table_item .-w60 { width: 60%; } .table_item .-w66 { width: 66.6666666667%; } .table_item .-w75 { width: 75%; } .table_item .-w80 { width: 80%; } @media only screen and (max-width: 640px) { .table_item .-spAuto { width: auto; } } @media only screen and (max-width: 640px) { .table_item.-spBlock { display: block; } .table_item.-spBlock tbody, .table_item.-spBlock tr, .table_item.-spBlock th, .table_item.-spBlock td { display: block; width: 100%; } } .faq .category { font-size: 2rem; } @media only screen and (max-width: 640px) { .faq .category { font-size: calc(20 / 640 * 100vw); } } .faq a { text-decoration: underline; } .faq dl { margin: 1.5em 0 2em; } .faq dl:last-child { margin-bottom: 0; } .faq dt { margin-bottom: 0.5em; padding-top: 0.25em; padding-left: 3rem; position: relative; font-weight: 700; font-size: 2rem; } @media only screen and (max-width: 640px) { .faq dt { padding-left: calc(30 / 640 * 100vw); font-size: calc(20 / 640 * 100vw); } } .faq dt::before { position: absolute; top: 0; left: 0; content: "Q"; font-size: 2.4rem; font-weight: 700; color: #203D8A; } @media only screen and (max-width: 640px) { .faq dt::before { font-size: calc(28 / 640 * 100vw); } } .faq dt .notes { font-size: 1.3rem; } @media only screen and (max-width: 640px) { .faq dt .notes { font-size: calc(16 / 640 * 100vw); } } .faq dd { margin-left: 3rem; padding-left: 3rem; padding-top: 0.25em; position: relative; } @media only screen and (max-width: 640px) { .faq dd { margin-left: 0; padding-left: calc(30 / 640 * 100vw); } } .faq dd::before { position: absolute; top: 0; left: 0; content: "A"; color: #FA7A93; font-size: 2.4rem; font-weight: 700; } @media only screen and (max-width: 640px) { .faq dd::before { font-size: calc(28 / 640 * 100vw); } } .faq dd em { color: #FE0031; font-weight: 700; } .faq dd .notes { font-size: 1.3rem; } @media only screen and (max-width: 640px) { .faq dd .notes { font-size: calc(16 / 640 * 100vw); } } .application_container { display: flex; justify-content: space-between; flex-wrap: wrap; } .application_item { width: 30%; position: relative; font-size: 2rem; font-weight: 700; line-height: 1.4; } @media only screen and (max-width: 640px) { .application_item { margin-bottom: calc(60 / 640 * 100vw); width: 100%; text-align: center; } } .application_item p { margin-bottom: 0.5em; } .application_item em { color: #FA7A93; } .application_item img { margin-bottom: 1em; } @media only screen and (max-width: 640px) { .application_item img { margin-bottom: 0.5em; width: calc(320 / 640 * 100vw); } } .application_item .notes { text-align: left; } .application_item::after { content: ""; position: absolute; top: 12.5rem; right: -12%; display: block; background: url(../image/arrow_tri_black.svg) no-repeat center center; background-size: 100% auto; width: 2.4rem; height: 2.8rem; } @media only screen and (max-width: 640px) { .application_item::after { top: auto; right: auto; bottom: -6vw; left: 50%; transform: translateX(-50%) rotate(90deg); width: calc(20 / 640 * 100vw); height: calc(24 / 640 * 100vw); } } .application_item:last-child::after { display: none; } .purchase_container { display: flex; flex-wrap: wrap; gap: 2.8rem; } .purchase_item { width: 22%; position: relative; font-weight: 700; } @media only screen and (max-width: 640px) { .purchase_item { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 1em; } } .purchase_item .purchase { flex-wrap: wrap; } .purchase_item::after { content: ""; position: absolute; top: 12.5rem; right: -12%; display: block; background: url(../image/arrow_tri_black.svg) no-repeat center center; background-size: 100% auto; width: 1.6rem; height: 2rem; } @media only screen and (max-width: 640px) { .purchase_item::after { top: auto; right: auto; bottom: -6vw; left: 50%; transform: translateX(-50%) rotate(90deg); width: calc(20 / 640 * 100vw); height: calc(24 / 640 * 100vw); } } .purchase_item:last-child::after { display: none; } .purchase_item img { margin-bottom: 1em; } @media only screen and (max-width: 640px) { .purchase_item img { width: 35%; } } @media only screen and (max-width: 640px) { .purchase_item p { width: 50%; } } .use_container { margin-top: 1.5em; display: flex; flex-wrap: wrap; justify-content: space-between; } @media only screen and (max-width: 640px) { .use_container { flex-direction: column; gap: 1em; } } .use_item { position: relative; font-weight: 700; font-size: 1.5rem; line-height: 1.35; } @media only screen and (max-width: 640px) { .use_item { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 1em; font-size: 3.125vw; } } .use_item::after { content: ""; position: absolute; top: 9.5rem; right: -22%; display: block; background: url(../image/arrow_tri_black.svg) no-repeat center center; background-size: 100% auto; width: 1.6rem; height: 2rem; } @media only screen and (max-width: 640px) { .use_item::after { top: auto; right: auto; bottom: -3vw; left: 50%; transform: translateX(-50%) rotate(90deg); width: calc(20 / 640 * 100vw); height: calc(24 / 640 * 100vw); } } .use_item:last-child::after { display: none; } .use_item.-column3 { width: 30%; display: flex; align-items: center; justify-content: space-between; } @media only screen and (max-width: 640px) { .use_item.-column3 { width: 100%; justify-content: flex-start; } } .use_item.-column3 p { width: 45%; } .use_item.-column3::after { right: -12%; } @media only screen and (max-width: 640px) { .use_item.-column3::after { right: auto; left: 50%; transform: translateX(-50%) rotate(90deg); width: calc(20 / 640 * 100vw); height: calc(24 / 640 * 100vw); } } .use_item.-column3 img { width: 50%; } @media only screen and (max-width: 640px) { .use_item.-column3 img { width: 35%; } } .use_item.-column5 { width: 16%; } @media only screen and (max-width: 640px) { .use_item.-column5 { width: 100%; } } .use_item.-column5 img { margin-bottom: 1em; } @media only screen and (max-width: 640px) { .use_item.-column5 img { width: 35%; } } .use_item img { margin-bottom: 1em; } @media only screen and (max-width: 640px) { .use_item img { width: 35%; } } @media only screen and (max-width: 640px) { .use_item p { width: 50%; } } .contact_frame { margin: 1em auto; padding: 1.5em; border-radius: 1.6rem; text-align: center; background: rgba(85, 151, 221, 0.1); } .contact_tel { margin: 0.25em auto 1em !important; line-height: 1.2; } .contact_tel a { font-size: 3.6rem; font-weight: 700; color: #203D8A; } .contact_btn { margin: 1.5em auto; } .contact_btn a { padding: 0.75em 3em 0.75em 1.5em; background: #fff; border: solid 3px #203D8A; border-radius: 1.6rem; text-align: left; font-size: 2rem; box-shadow: 0.4rem 0.4rem 0 0 #203D8A; position: relative; display: inline-block; color: #203D8A; font-weight: 700; } @media only screen and (max-width: 640px) { .contact_btn a { border-radius: calc(16 / 640 * 100vw); font-size: calc(24 / 640 * 100vw); box-shadow: calc(3 / 640 * 100vw) calc(3 / 640 * 100vw) 0 0 #203D8A; } } .contact_btn a::after { content: "→"; position: absolute; right: 0.5em; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 3rem; } @media only screen and (max-width: 640px) { .contact_btn a::after { font-size: calc(30 / 640 * 100vw); font-weight: 600; } }/*# sourceMappingURL=common.css.map */