@charset "UTF-8"; /* color ------------------------------------------------*/ /* breakpoint ------------------------------------------------*/ /* font ------------------------------------------------*/ .txt-roboto { font-family: 'Roboto', sans-serif; } .txt-source { font-family: 'Source Sans Pro', sans-serif; } /* enako2 上書き ------------------------------------------------*/ .btn-inpage { margin: 0 auto 100px; max-width: 500px; text-align: center; line-height: 1; position: relative; cursor: pointer; } .btn-inpage a { display: block; font-size: 16px; font-weight: bold; color: #1C2F9D; position: relative; z-index: 2; border: solid 6px #1C2F9D; padding: 30px; } .btn-inpage:before { content: ''; display: block; width: 100%; height: 0; background: #1C2F9D; position: absolute; right: 0; top: 0; } .btn-inpage .arrow { position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 20px; height: 30px; } .btn-inpage .arrow:before { content: ''; display: inline-block; height: 30px; width: 4px; background: #1C2F9D; border-radius: 1px; position: absolute; left: 9px; bottom: 0; } .btn-inpage .arrow:after { content: ''; display: block; height: 20px; width: 20px; border-radius: 1px; border-right: solid 4px #1C2F9D; border-top: solid 4px #1C2F9D; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); position: absolute; left: 1px; bottom: 0; } @media only screen and (min-width: 640px) { .btn-inpage a { -webkit-transition: color .3s ease; transition: color .3s ease; } .btn-inpage:before { -webkit-transition: height 0.3s cubic-bezier(0.65, 0.05, 0.36, 1); transition: height 0.3s cubic-bezier(0.65, 0.05, 0.36, 1); } .btn-inpage .arrow { -webkit-transition: top 0.3s cubic-bezier(0.65, 0.05, 0.36, 1); transition: top 0.3s cubic-bezier(0.65, 0.05, 0.36, 1); } .btn-inpage .arrow:before { -webkit-transition: background-color .3s ease; transition: background-color .3s ease; } .btn-inpage .arrow:after { -webkit-transition: border-color .3s ease; transition: border-color .3s ease; } .btn-inpage:hover a { color: #FFFFFF; } .btn-inpage:hover:before { height: 100%; } .btn-inpage:hover .arrow { top: 56%; } .btn-inpage:hover .arrow:before { background-color: #FFFFFF; } .btn-inpage:hover .arrow:after { border-color: #FFFFFF; } } @media only screen and (max-width: 639px) { .btn-inpage { margin: 50px auto 80px; max-width: 100%; } .btn-inpage a { font-size: 15px; border: solid 3px #1C2F9D; padding: 15px; } .btn-inpage .arrow { right: 16px; } .btn-inpage .arrow:before { width: 3px; height: 26px; } .btn-inpage .arrow:after { height: 15px; width: 15px; border-right: solid 3px #1C2F9D; border-top: solid 3px #1C2F9D; left: 3px; } } .making-movie { text-align: center; margin-bottom: 100px; } .making-movie .txt-bold { font-size: 24px; letter-spacing: 0.1rem; line-height: 1.65; font-weight: bold; margin-bottom: 10px; color: #1C2F9D; } @media only screen and (max-width: 639px) { .making-movie .txt-bold { font-size: 17px; line-height: 1.4; letter-spacing: 0; } } .making-movie .wrap-youtube { margin: 0 auto 60px; width: 760px; max-width: 100%; height: 428px; position: relative; } .making-movie .wrap-youtube iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } @media only screen and (max-width: 639px) { .making-movie .wrap-youtube { max-width: 100%; height: 0; padding-top: 56.25%; } } .enako-campaign.omoide-detail { padding-top: 100px; margin: 0 auto 80px; } @media only screen and (max-width: 639px) { .enako-campaign.omoide-detail { padding-top: 0; margin: 0 auto 10px; } } .enako-campaign.omoide-detail .block-detail { padding-top: 120px; } .enako-campaign.omoide-detail .block-detail .subttl { padding-right: 0; } @media only screen and (max-width: 639px) { .enako-campaign.omoide-detail .block-detail { padding-top: 16px; } .enako-campaign.omoide-detail .block-detail .subttl { font-size: 16px; } } @media only screen and (min-width: 640px) { .enako-campaign.omoide-detail .tag { right: 52%; } } @media only screen and (max-width: 639px) { .enako-campaign.omoide-detail .tag { top: 0; width: 140px; } } .enako-campaign.omoide-detail .img-right { padding-top: 130px; } @media only screen and (max-width: 639px) { .enako-campaign.omoide-detail .img-right { width: 100%; padding-top: 0; } } .enako-campaign.omoide-detail .box-period { display: inline-block; } .enako-campaign.omoide-detail .box-period.finish { display: block; } .enako-campaign.omoide-howto { margin-bottom: 100px; } .enako-campaign.omoide-howto .block-step .step-img { margin-top: 0; } @media only screen and (max-width: 639px) { .enako-campaign.omoide-howto .block-step .step-txt .txt-main { line-height: 1.4; } } .enako-campaign.omoide-howto .block-step .step-txt .txt-main a { color: #287eff !important; display: inline-block; position: relative; border-bottom: solid 2px #287eff; } @media only screen and (min-width: 640px) { .enako-campaign.omoide-howto .block-step .step-txt .txt-main a { cursor: pointer; -webkit-transition: opacity .3s ease-in; transition: opacity .3s ease-in; } .enako-campaign.omoide-howto .block-step .step-txt .txt-main a:hover { opacity: .7; } }