@charset "UTF-8";/*! ********************************************************************-
CSS Document
※このCSSはSassから生成されています
- ******************************************************************** */
body {
margin: 0 auto;
box-sizing: border-box;
width: 100%;
/* outline: 1px solid magenta; */
font-family:'Noto Sans JP', sans-serif;
}
p {
font-size: 17px;
line-height: 2.3rem;
}
#wrapper, header {
position: relative
}
header {
border-bottom: solid 1px #3e3a39;
background: url(../image/common/header/bg.png);
z-index: 101;
margin: o auto;
background-color: #f0f0f0;
}
header div.content {
margin: 0 auto;
}
header div.content div.headline {
padding: 5px 0 10px
}
header div.content div.headline hgroup h1 {
margin-top: 20px;
margin-left: 10px;
font-size: .85em;
line-height: 1.2em
}
header div.content div.headline div.contact ul#fontsize {
text-align: right
}
header div.content div.headline div.contact ul#fontsize li {
display: inline-block;
vertical-align: middle
}
header div.content div.headline div.contact ul#fontsize li a {
display: block;
width: 18px;
height: 17px;
background-repeat: no-repeat
}
header div.content div.headline div.contact ul#fontsize li a.active, header div.content div.headline div.contact ul#fontsize li a:hover {
background-position: 0 -17px!important
}
header div.content div.headline div.contact p.tel {
margin-top: 10px
}
header div.content div.headline div.contact div.other span.email {
margin-left: 10px
}
header div.content nav ul.global-nav {
background: #fff;
border-right: dotted 1px #3e3a39
}
header div.content nav ul.global-nav>li {
border-left: dotted #3e3a39 1px;
position: relative;
float: left;
text-align: center
}
header div.content nav ul.global-nav>li a {
display: block;
padding: 15px 0;
color: #3e3a39;
background: #fff;
font-weight: 700;
text-decoration: none
}
header div.content nav ul.global-nav>li ul>li:hover>a, header div.content nav ul.global-nav>li.active>a, header div.content nav ul.global-nav>li:hover>a {
background: #3e3a39;
color: #fff
}
header div.content nav ul.global-nav>li ul {
position: absolute;
width: 100%;
top: 100%;
left: 0
}
header div.content nav ul.global-nav>li ul>li {
overflow: hidden;
height: 0;
transition: .2s
}
header div.content nav ul.global-nav>li ul>li a {
padding: 13px 15px;
text-align: left;
font-size: 19px;
font-weight: 400
}
header div.content nav ul.global-nav>li:last-child ul {
/* left: -100%; */
width: 100%
}
header div.content nav ul.global-nav>li:hover ul>li {
overflow: visible;
height: 38px;
margin: 0 -2px;
border: 2px solid #3e3a39;
border-top: none;
border-bottom: none
}
header div.content nav ul.global-nav>li:hover ul>li:first-child {
border-top: solid #3e3a39 2px
}
header div.content nav ul.global-nav>li:hover ul>li:last-child {
border-bottom: solid #3e3a39 2px
}
.header_block {
display: flex;
justify-content: space-between;
padding: 20px 0;
width: 60vw;
margin: 0 auto;
align-items: center;
}
.header_left_logo {
display: flex;
align-items: center;
}
.header_left_logo h3{
font-size: 0.8rem;
line-height: 1.1rem;
}
.header_tel{
display: inline-block;
}
.header_tel object{
pointer-events: none;
}
.header_left_logo img, .company img{
width: 10vw;
height: auto;
margin: 0 2vw;
}
/* 動画部分ここから */
.Video_section {
position: relative;
}
.subwindow-wrap button{
display:inline;
border: none;
outline: none;
background: transparent;
}
.subwindow-wrap img {
width: 20vw;
height: auto;
margin: 10px 0 15px 0;
}
/* 動画を囲うdiv */
.youtube-video {
position: relative;
width:100%; /* 横幅は100%で固定 */
height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
padding-top: 56.25%; /* 高さを指定(16:9) */
}
/* YouTube埋め込み用のiframe */
.youtube-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: transparent;
}
.Video_section {
width: 80vw;
height: auto;
margin: 0 auto;
}
.Video_section h2{
margin: 40px 0 30px;
text-align: center;
font-weight: bold;
}
.slick_slider img{
width: 100%;
height: auto;
display: inline-block;
}
/* 動画部分ここまで */
/* 星評価ここから */
.star5_rating{
position: relative;
z-index: 0;
display: inline-block;
white-space: nowrap;
color: #CCCCCC; /* グレーカラー 自由に設定化 */
/*font-size: 30px; フォントサイズ 自由に設定化 */
}
.subwindow-wrap button p{
width: 19vw;
display: flex;
align-items: center;
justify-content: space-between;
border: 1.5px solid #e8d8b0;
margin: 0 auto;
font-weight: bold;
padding: 0.5vw;
}
.subwindow-wrap button br {
display: block;
content: "";
margin: 7px 0;
}
.star5_rating:before, .star5_rating:after{
content: '★★★★★';
}
.star5_rating:after{
position: absolute;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
color: #ffcf32; /* イエローカラー 自由に設定化 */
}
.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */
.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */
.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5_rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */
.star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */
/*[CSSのみ] 続きを読むボタンをCSSで実装するここから*/
.grad-wrap {
position: relative;
}
.grad-btn {
z-index: 2;
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 40%;
margin: auto;
padding: 0.5em 0;
border-radius: 2px;
background: #007f7c;
color: #fff;
font-size: 1rem;
text-align: center;
cursor: pointer;
transition: .2s ease;
box-shadow: 0 0 3px rgba(0,0,0,.3);
margin-bottom: 25px;
}
.grad-btn:hover {
background: #fff;
color: #007f7c;
}
/* .grad-trigger:checked ~ .grad-btn {
bottom: -1.8em;
}*/
.grad-btn::before {
content: "続きを読む";
}
.grad-item {
position: relative;
overflow: hidden;
height: 150px; /*隠した状態の高さ*/
}
.grad-item::before {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px; /*グラデーションで隠す高さ*/
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
content: "";
}
.grad-trigger {
display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
content: "閉じる" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}
/*[CSSのみ] 続きを読むボタンをCSSで実装するここまで*/
.Section_border {
margin-top: 120px;
}
.Section_border img{
width: 100%;
height: auto;
}
.Content_section h1{
text-align: left;
margin-top: 80px;
margin-bottom: 30px;
font-weight: 600;
width: 80vw;
margin-left: auto;
margin-right: auto;
line-height: 2.5rem;
/* border-left: 5px solid #a32a2c; */
padding-left: 10px;
}
.Content_section h1 img{
margin-right: 20px;
height: 28px;
}
.Item_box {
width: 70vw;
margin: 0 auto;
/* background-color: #f9f9f9; */
/* box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); */
}
.Item_box img{
width: 100%;
height: auto;
}
.Item_box .grad-wrap, .Item_box #grad-no-wrap{
background-color: #fff;
/* margin: 50px 40px 40px; */
/* padding: 40px 30px; */
}
.grad-wrap {
display: none;
}
.Item_box strong{
line-height: 2rem;
font-size: 17px;
/* background: linear-gradient(transparent 60%, rgba(173,0,33,0.15) 60%); */
}
.Item_box .p_space {
display: inline-block;
margin-bottom: 1.5rem;
}
.Item_block .New_line {
margin-top: 10px;
}
.Main_pic_block {
position: relative;
color: #fff;
text-align: center;
}
.Main_pic_block img{
width: 100%;
height: auto;
}
.Main_pic_block img:nth-of-type(2){
display: none;
}
.Main_pic_block h2{
font-size: 2.5rem;
margin-bottom: 30px;
font-weight: 600;
}
.Main_pic_text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 80vw;
}
.Item_img_box {
margin-top: 50px;
margin-bottom: 50px;
}
/* レスポンシブここから */
/* Larger devices */
@media screen and (min-width: 1441px) {
.Video_section {
width: 60vw;
}
.subwindow-wrap img {
width: 15vw;
}
.subwindow-wrap button p{
width: 14vw;
}
.Content_section h1 {
font-size: 35px;
width: 70vw;
}
.Main_pic_block h2 {
font-size: 35px;
}
.Content_section h1 img {
margin-right: 20px;
height: 35px;
}
.Video_section h2 br{
display: none;
}
.header_left_logo img, .company img {
width: 5vw;
}
}
/* Large devices */
@media screen and (max-width: 1440px) {
.Video_section h2 br{
display: none;
}
.Content_section h1{
width: 70vw;
}
}
/* Large devices (desktops, 992px and up) */
/* iPadPro縦/iPad横 */
@media screen and (max-width: 1199px) {
.Video_section {
width: 60vw;
}
.subwindow-wrap img {
width: 15vw;
}
.subwindow-wrap button p{
width: 14vw;
}
.Item_box {
width: 80vw;
}
.subwindow-wrap p{
font-size: 10px;
}
.header_block {
width: 80vw;
align-items: center;
}
.Content_section h1{
width: 80vw;
}
}
/* Medium devices(tablets, 768px and up) */
/* iPad縦/iPhoneX横 */
@media screen and (max-width: 991px){
.header_left_logo {
display: block;
text-align: center;
flex-direction: column-reverse;
}
.header_left_logo h3 {
line-height: 1rem;
margin-top: 5px;
}
.subwindow-wrap p{
font-size: 8px;
}
.subwindow-wrap button p{
width: 24vw;
}
.subwindow-wrap img {
width: 25vw;
}
.Item_box {
width: 80vw;
}
.Video_section {
width: 70vw;
}
.header_left_logo img{
width: 15vw;
height: auto;
}
}
/* Small devices(landscape phones, 576px and up) */
/* iPhone6,7,8Plus横/iPhone6,7,8横 */
@media screen and (max-width: 767px) {
}
/* Extra small devices(portrait phones, less than 576px) */
@media screen and (max-width: 575px) {
.Video_section {
width: 80vw;
}
.Item_box {
width: 85vw;
}
.subwindow-wrap p{
font-size: 10px;
}
.Item_box p, .Item_box strong{
font-size: 16px;
}
.subwindow-wrap button p{
width: 79%;
}
.subwindow-wrap img {
width: 80%;
}
.Content_section h1 {
width: 85vw;
text-align: left;
margin: 50px auto 20px;
font-size: 1.5em;
line-height: 2.2rem;
}
.Item_box .grad-wrap {
background-color: #fff;
margin: 20px 15px 15px;
padding: 20px 15px 80px;
}
.Video_section h2 {
line-height: 1.5rem;
}
.Section_border {
margin-top: 70px;
}
.header_left_logo img{
width: 35vw;
}
.header_left_logo h3 {
display: none;
}
.header_right_contact {
width: 60%;
}
.header_block {
width: 90vw;
align-items: center;
}
.Video_section h2 br{
display: block;
}
/* #grad-no-wrap{
display: none;
}*/
.grad-wrap {
display: block;
}
.header_left_logo img, .company img{
width: 20vw;
height: auto;
}
.Main_pic_block img:nth-of-type(1){
display: none;
}
.Main_pic_block img:nth-of-type(2){
display: block;
}
.Main_pic_block h2 {
font-size: 1.8rem;
line-height: 2.5rem;
margin-bottom: 20px;
}
.Main_pic_text p {
line-height: 1.6rem;
font-size: 14px;
}
.Main_pic_text {
width: 90vw;
}
.Item_img_box {
margin-top: 30px;
margin-bottom: 30px;
}
}
/* レスポンシブここまで */
/* 削除しない */
main.modules div.wgt-top div.crumb {
text-align: right;
padding: 10px 0;
width: 60vw;
margin: 0 auto;
/* width: 940px; */
}
/* 削除しない */
main.modules div.wgt-top div.crumb>* {
color: #3e3a39;
font-size: .71em;
font-style: normal
}
/* 削除しない */
main.modules div.wgt-top h2 {
background: url(../image/common/title_btmline.png) 0 100% no-repeat rgba(0,0,0,0);
font-size: 2em;
text-align: center;
font-weight: 700;
margin-bottom: 50px;
padding-bottom: 3px;
letter-spacing: .3em
}
/* 削除しない */
main.modules div.main-content div.wgt-headline p.page-title {
margin: 50px 0 20px;
font-size: 2.94em;
font-weight: 700;
text-align: center;
}
.other {
text-align: center;
margin-top: 8px;
}
.wgt-headline h2 {
text-align: center;
margin-bottom: 70px;
color: #ff6700;
}
main.modules div.wgt-solution ul li {
box-shadow: 0 0 5px 0 rgba(0,0,0,.3);
/* margin-right: 50px; */
width: 30vw;
}
main.modules div.wgt-solution ul li:nth-of-type(2) {
/* margin-right: 0; */
}
main.modules div.wgt-solution ul {
display: flex;
justify-content: space-around;
margin: 0 auto;
}
.wgt-solution ul li{
text-align: center;
width: 30vw;
font-size: 1.1em;
line-height: 1.43em;
font-weight: 700;
margin: 10px auto;
}
.wgt-solution .text{
padding: 20px;
line-height: 1.5rem;
}
main.modules div.wgt-solution ul li div.btn a {
color: #FFF;
width: 100%;
height: 50%;
padding: 15px 0;
display: block;
}
main.modules div.wgt-solution ul li div.btn {
background: #6eaf48;
height: auto;
margin: auto 0;
text-align: center;
font-weight: 700;
}
main.modules div.wgt-contact div {
padding: 0 0 30px;
}
.footer_contact_block {
display: flex;
justify-content: space-around;
margin: 0 auto;
}
.line_dot {
margin: 120px auto 0;
width: 100%;
}
.wgt-solution h3, .wgt-contact h3{
font-family: serif;
font-size: 30px;
text-align: center;
margin: 50px auto 20px;
line-height: 1.51em;
font-weight: 500;
border-top: dotted #3e3a39 1px;
padding-top: 50px;
}
.line_dot .wgt-contact h3{
border-bottom: dotted #3e3a39 1px;
padding-bottom: 50px;
border-top: none;
margin-top: 0;
}
.wgt-contact h3{
margin-bottom: 0;
}
.wgt-solution {
text-align: center;
}
.wgt-solution p{
font-weight: 600;
padding-bottom: 20px;
}
.wgt-contact p{
text-align: center;
margin: 50px 0;
font-weight: 700;
}
main.modules div.wgt-solution ul {
margin-top: 30px;
}
/* レスポンシブここから */
/* Larger devices */
@media screen and (min-width: 1441px) {
.line_dot {
margin: 120px auto 0;
width: 70vw;
}
.wgt-solution {
padding-bottom: 30px;
}
main.modules div.main-content div.wgt-headline p.page-title {
margin: 50px 0 15px;
font-size: 44px;
font-weight: 700;
text-align: center;
}
.line_dot h3 br{
display: none;
}
main.modules div.wgt-solution ul li {
width: 20vw;
}
}
/* Large devices */
@media screen and (max-width: 1440px) {
.wgt-solution h3 br{
display: none;
}
.wgt-contact h3 br{
display: block;
}
/* main.modules div.wgt-solution ul li {
width: 25vw;
}*/
main.modules div.wgt-solution ul {
width: 80%;
}
}
/* Large devices (desktops, 992px and up) */
/* iPadPro縦/iPad横 */
@media screen and (max-width: 1199px) {
main.modules div.wgt-top div.crumb {
width: 80vw;
}
main.modules div.wgt-solution ul li {
width: 30vw;
}
main.modules div.wgt-solution ul {
width: 80vw;
}
}
/* Medium devices(tablets, 768px and up) */
/* iPad縦/iPhoneX横 */
@media screen and (max-width: 991px){
}
/* Small devices(landscape phones, 576px and up) */
/* iPhone6,7,8Plus横/iPhone6,7,8横 */
@media screen and (max-width: 767px) {
.wgt-solution h3 br{
display: block;
}
}
/* Extra small devices(portrait phones, less than 576px) */
@media screen and (max-width: 575px) {
.line_dot h3 {
width: 80vw;
font-size: 20px;
}
.footer_contact_block {
display: block;
}
.wgt-contact {
width: 80vw;
margin: 0 auto;
text-align: center;
}
main.modules div.wgt-contact div {
width: 80vw;
}
main.modules div.wgt-contact img{
width: 80vw;
height: auto;
}
.wgt-solution .text {
font-size: 13px;
}
main.modules div.wgt-solution ul li {
box-shadow: 0 0 5px 0 rgba(0,0,0,.3);
/* margin-right: 50px; */
}
.other b{
font-size: 12px;
}
.line_dot {
margin: 60px auto 0;
width: 100%;
}
.line_dot h3 {
margin: 10px auto;
padding-bottom: 0px;
}
main.modules div.wgt-solution ul {
display: block;
margin-top: 30px;
}
main.modules div.wgt-solution ul li {
width: 70vw;
margin-bottom: 30px;
}
main.modules div.wgt-solution ul li:nth-of-type(2) {
margin-bottom: 0px;
}
.wgt-headline h2 {
margin-bottom: 40px;
}
main.modules div.main-content div.wgt-headline p.page-title {
margin: 35px 0 15px;
}
.other {
text-align: center;
margin-top: 5px;
}
.wgt-solution p{
padding: 20px 0 0;
font-weight: 600;
margin: 0;
font-size: 12px;
}
main.modules div.main-content div.wgt-headline p.page-title {
font-size: 2.2em;
}
.wgt-solution h3, .wgt-contact h3 {
margin-bottom: 0;
padding-top: 50px;
}
}
/* レスポンシブここまで */
/*========= 動画 ===============*/
.Movie_section {
/* background: linear-gradient(-225deg, #0C7B77 0%, #12B29E 56%, #007470 100%); */
padding: 10vw 20vw 15vw;
text-align: center;
}
.Movie_img div{
display: block;
width: 100%;
height: auto;
margin-bottom: 5vw;
text-align: center;
}
.Movie_img img{
width: 90%;
height: auto;
}
.Movie_img p{
margin-bottom: 40px;
}
/* 動画を囲うdiv */
.Video_contents {
position: relative;
width:100%; /* 横幅は100%で固定 */
height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
padding-top: 56.25%; /* 高さを指定(16:9) */
z-index: 1;
}
/* YouTube埋め込み用のiframe */
.Video_contents iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.Video_contents_modal img{
width: 100%;
height: auto;
}
.Before_footer_block {
background-image: url(../img/Contanct_pic.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
padding: 40px 40px 30px;
z-index: 9999;
}
.Before_footer_text {
color: #fff;
text-align: center;
}
.Before_footer_text h2{
font-size: 2.2rem;
margin-bottom: 20px;
margin-top: 30px;
}
.Before_footer_button_block {
display: flex;
justify-content: center;
margin-top: 30px;
width: 80vw;
margin-left: auto;
margin-right: auto;
}
.Before_footer_button_block img{
width: 3vw;
height: auto;
margin-left: 4vw;
}
.Before_footer_block_button {
width: 80vw;
display: none;
}
.Before_footer_button_block_2 {
display: flex;
justify-content: space-around;
position: fixed;
left: 50%;
bottom: 0;
transform: translateX(-50%) translateY(0%);
z-index: 999;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
padding: 5px;
width: 100%;
}
.Before_footer_button_block_2 {
background-color: rgba(255, 255, 255, 0.9);
}
.Before_footer_button_block_2 img{
width: 3vw;
height: auto;
margin-left: 4vw;
}
.Before_footer_button_block a {
margin: 0 10px;
}
.Before_footer_block_button2 span {
writing-mode: vertical-rl;
display: block;
}
#btn_fixed_2 {
display: block;
/* height: 200px; */
}
.Before_footer_button_block_3 img {
width: 2vw;
margin-top: 2vw;
}
.Before_footer_button_block_3 {
position: fixed;
right: 0%;
top: 25%;
transform: translateX(0%) translateY(0%);
z-index: 999;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
/* padding: 5px; */
}
.Before_footer_block_button2 .btn, a.btn, button.btn {
color: #fff;
border-radius: 20rem;
padding: 1.5vw 1.7vw;
margin-bottom: 30px;
}
.Before_footer_block_button2 #btn_fixed_2:nth-of-type(2) {
margin-bottom: 0;
}
#btn_fixed_2 {
border-radius: 8px 0 0 8px;
}
.btn,
a.btn,
button.btn {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
/* display: inline-block; */
padding: 1.2rem 2.5rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 20rem;
}
.btn--orange,a.btn--orange {
color: #fff;
background-color: #f18900;
}
.btn--orange:hover,
a.btn--orange:hover {
color: #fff;
background: #ffa32b;
}
.btn--orange {
display: flex;
align-items: center;
justify-content: space-between;
}
.btn--orange span{
font-size: 1.2rem;
}
footer div.nav div.global-nav {
background: #454545;
padding: 8px 0;
text-align: center;
width: 100%;
}
footer div.nav div.global-nav ul li {
display: inline-block;
padding: 0 10px;
border-left: solid #fff 1px;
font-size: 2.14em;
}
footer div.nav div.global-nav ul li:nth-of-type(1) {
border-left: none;
}
footer div.nav div.global-nav ul li a {
font-size: .85em;
color: #FFF
}
footer div.nav div.global-nav ul li a:hover {
text-decoration: underline;
color: #FFF
}
footer div.nav div.info {
background: #323232;
padding: 15px 0;
text-align: center;
display: block;
}
.content_block {
text-align: left;
display: inline-block;
}
footer div.nav div.info p{
font-size: 20px;
color: #fff;
line-height: 3rem;
text-align: left;
display: inline-block;
}
footer div.nav div.info a{
color: #fff;
font-size: 20px;
}
footer div.nav div.info div.content {
width: 80vw;
margin: 0 auto;
}
footer div.nav div.info div.content a{
color: #fff;
}
footer div.nav div.info div.content p.privacy {
float: right
}
footer div.company {
padding: 80px 0;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
footer div.company .logo{
margin-right: 30px;
}
.company ul {
text-align: left;
display: inline-block;
}
.company ul li{
line-height: 1.5rem;
}
footer .footer_copyright {
margin-top: 0;
font-size: .75em;
line-height: 1.4em;
text-align: center;
margin-bottom: 30px;
}
.tel a, .mail a{
font-size: 30px;
font-weight: bold;
color: #000;
}
/* フッター FontAwesomeここから */
.tel::before {
content: '\f095';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-right: 10px;
font-size: 28px;
}
.mail::before {
content: '\f0e0';
font-family: 'Font Awesome 5 Free';
font-weight: 400;
margin-right: 10px;
font-size: 30px;
}
/* フッター FontAwesomeここまで */
@keyframes shiny {
0% { left: -20%; }
10% { left: 120%; }
100% { left: 120%; }
}
.shiny-btn {
position: relative;
display: block;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
text-decoration: none;
color: #ffffff;
background-image: linear-gredient(to left top, #b8d200, #6eaf48);
overflow: hidden;
}
.shiny-btn::after {
content: '';
position: absolute;
top: -10%;
left: -20%;
width: 100%;
height: 100%;
transform: scale(2) rotate(20deg);
background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
/* アニメーション */
animation-name: shiny;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
/* レスポンシブここから */
/* Larger devices */
@media screen and (min-width: 1441px) {
footer div.nav div.info div.content {
margin: 0 auto;
}
footer div.nav div.info div.content {
margin: 0 auto;
margin: 16px auto;
text-align: center;
display: block;
}
.btn--orange span {
font-size: 2.2rem;
}
.Before_footer_button_block img {
width: 1.8vw;
height: auto;
margin-left: 4vw;
}
.Before_footer_block_button2 .btn, a.btn, button.btn {
padding: 1vw 1.2vw;
}
}
/* Large devices */
@media screen and (max-width: 1440px) {
footer div.nav div.info p {
font-size: 20px;
}
footer div.nav div.info a {
font-size: 20px;
}
}
/* Large devices (desktops, 992px and up) */
/* iPadPro縦/iPad横 */
@media screen and (max-width: 1199px) {
footer div.nav div.global-nav ul li a {
font-size: 1.5rem;
color: #FFF;
}
}
/* Medium devices(tablets, 768px and up) */
/* iPad縦/iPhoneX横 */
@media screen and (max-width: 991px){
footer div.nav div.global-nav ul li a {
font-size: 20px;
color: #FFF;
}
.Before_footer_button_block_3 {
display: none;
}
}
/* Small devices(landscape phones, 576px and up) */
/* iPhone6,7,8Plus横/iPhone6,7,8横 */
@media screen and (max-width: 767px) {
}
/* Extra small devices(portrait phones, less than 576px) */
@media screen and (max-width: 575px) {
footer div.nav div.global-nav ul li a {
font-size: 0.8rem;
text-align: center;
}
footer div.nav div.global-nav ul li {
font-size: 0;
}
footer div.nav div.info div.content p.pm {
float: left;
color: #fff;
line-height: 1.3em;
font-size: 1em;
}
footer div.company {
width: 80vw;
}
footer div.company {
padding: 50px 0;
text-align: center;
margin: 0 auto;
display: block;
justify-content: center;
}
.content_block {
width: 80vw;
}
footer div.nav div.info p {
font-size: 14px;
color: #fff;
line-height: 1.5rem;
}
footer div.nav div.info a {
color: #fff;
font-size: 14px;
line-height: 1.5rem;
}
footer div.company .logo {
margin-right: 0;
margin-bottom: 20px;
}
.tel a, .mail a {
font-size: 25px;
font-weight: bold;
color: #000;
}
.mail::before {
content: '\f0e0';
font-family: 'Font Awesome 5 Free';
font-weight: 400;
margin-right: 10px;
font-size: 28px;
}
.tel::before {
content: '\f095';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-right: 10px;
font-size: 25px;
}
footer div.nav div.global-nav ul li {
padding: 0 5px 0 10px;
}
.Before_footer_button_block {
display: block;
margin-top: 0;
}
.btn,
a.btn,
button.btn {
width: 45vw;
margin: 30px auto;
}
.btn,
a.btn,
button.btn:nth-of-type(2) {
margin-bottom: 0;
}
.Contact_button {
text-align: center;
}
.Before_footer_block {
background-image: url(../img/Contanct_pic_2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
padding: 20px auto 0;
}
.Before_footer_button_block img {
width: 5vw;
height: auto;
margin-left: 2vw;
}
.Before_footer_text h2 {
font-size: 1.8rem;
margin-bottom: 20px;
}
.Movie_img p, .Before_footer_text p {
font-size: 16px;
line-height: 2rem;
margin-bottom: 20px;
}
.Movie_section {
padding: 15vw 0 20vw;
}
#btn_fixed {
padding: 15px;
margin: 10px 2px;
width: 38vw;
justify-content: space-around;
}
#btn_fixed span {
font-size: 0.9rem;
}
.Before_footer_button_block_2 {
justify-content: space-around;
}
.Before_footer_button_block_2 img {
width: 5vw;
height: auto;
margin-left: 4vw;
}
.Before_footer_block_button {
display: block;
}
footer .footer_copyright {
margin-bottom: 100px;
}
.Before_footer_block_button2 {
display: none;
}
.Before_footer_block {
padding: 50px 30px 40px;
}
.Before_footer_text h2 {
margin-top: 0;
}
.Movie_block {
width: 85vw;
margin: 0 auto;
}
}
/* レスポンシブここまで */
/* 2025.02.10 */
/* .top-intro {
background-color: #158058;
padding: 1rem 0 5.625rem;
} */
.inner_kanrizero {
width: 100%;
/* max-width: 900px; */
padding-left: 1px;
padding-right: 1px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.inner_kanrizero {
max-width: 100%;
/* padding-left: 1.5rem;
padding-right: 1.5rem; */
}
}
/*
@media (max-width: 560px) {
.top-intro__container {
border-radius: .625rem;
}
}
@media (max-width: 560px) {
.top-intro__container {
padding: 1.25rem 1.25rem 2.1875rem;
}
}
@media (max-width: 768px) {
.top-intro__container {
padding: 2.5rem 2.5rem 3.125rem;
}
}
@media (max-width: 1024px) {
.top-intro__container {
padding: 2.5rem 3.125rem;
}
}
.top-intro__container {
padding: 5.25rem 3.125rem;
background-color: #fff;
border-radius: 1.25rem;
}
.top-intro__heading {
display: flex;
align-items: flex-start;
gap: 1.25rem;
margin-bottom: 2.5rem;
}
@media (max-width: 560px) {
.top-intro__list__heading {
padding-left: .5em;
color: #158058;
}
}
@media (max-width: 768px) {
.top-intro__list__heading {
width: 100%;
max-width: 100%;
padding-left: 1em;
color: #158058;
}
}
.top-intro__list__heading {
font-weight: 700;
color: #158058;
font-size: 2.5rem;
}
@media (max-width: 768px) {
.top-intro__list {
gap: 2.5rem;
}
}
.top-intro__list {
display: grid;
grid-template-columns: 1fr;
gap: 3.75rem;
}
@media (max-width: 560px) {
.top-intro__list__item {
padding-bottom: 10rem;
}
}
@media (min-width: 769px) {
.top-intro__list__item {
padding-left: 8.125rem;
padding-right: 16.25rem;
}
}
.top-intro__list__item {
position: relative;
}
@media (min-width: 769px) {
.top-intro__list__point {
position: absolute;
top: 0;
left: 0;
}
}
@media (max-width: 768px) {
.top-intro__list__point {
width: 4.75rem;
height: 4.75rem;
}
}
.top-intro__list__point {
width: 6.25rem;
height: 6.25rem;
border: .125rem solid #158058;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #158058;
font-weight: 800;
position: relative;
flex-shrink: 0;
}
.top-intro__list__point:after {
content: "";
width: .5em;
height: .5em;
background-color: #fff;
rotate: -45deg;
position: absolute;
bottom: 0;
right: 0;
translate: -100% -100%;
}
@media (max-width: 560px) {
.top-intro__list__header {
margin-bottom: 1em;
}
}
@media (max-width: 768px) {
.top-intro__list__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .5em;
}
}
.top-intro__container__inner {
max-width: 900px;
margin: 0 auto;
}
.top-intro__heading {
display: flex;
align-items: flex-start;
gap: 1.25rem;
margin-bottom: 2.5rem;
}
@media (max-width: 560px) {
.top-intro__heading .text {
color: #158058;
font-size: 1.188rem;
}
}
@media (max-width: 768px) {
.top-intro__heading .text {
color: #158058;
font-size: 1.688rem;
}
}
.top-intro__heading .text {
font-weight: 700;
color: #158058;
font-size: 3.75rem;
line-height: 1.6;
}
@media (max-width: 560px) {
.top-intro__heading .ic {
width: 2.9375rem;
}
}
@media (max-width: 768px) {
.top-intro__heading .ic {
width: 3.875rem;
}
}
@media (max-width: 1024px) {
.top-intro__heading .ic {
width: 5.625rem;
}
}
.top-intro__heading .ic {
width: 6.1875rem;
flex-shrink: 0;
}
.top-intro__list {
display: grid;
grid-template-columns: 1fr;
gap: 3.75rem;
}
@media (min-width: 769px) {
.top-intro__list__item {
padding-left: 8.125rem;
padding-right: 16.25rem;
}
}
@media (max-width: 560px) {
.top-intro__list__item {
padding-bottom: 10rem;
}
}
.top-intro__list__item {
position: relative;
}
@media (min-width: 769px) {
.top-intro__list__text {
max-width: 30rem;
}
}
@media (max-width: 560px) {
.top-intro__list__header {
margin-bottom: 1em;
}
}
@media (max-width: 768px) {
.top-intro__list__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .5em;
}
}
@media (max-width: 768px) {
.top-intro__list__img {
flex-shrink: 0;
}
}
@media (max-width: 560px) {
.top-intro__list__img {
position: absolute;
bottom: 0;
left: 50%;
translate: -50% 0;
width: 16.25rem;
}
}
@media (max-width: 1024px) {
.top-intro__list__img {
width: 12.5rem;
}
}
.top-intro__list__img {
width: 15.125rem;
}
@media (min-width: 769px) {
.top-intro__list__text {
max-width: 30rem;
}
} */
.max900 {
max-width: 900px;
margin: 0 auto
}
.max1000 {
max-width: 1000px;
margin: 0 auto
}
.inner-inner {
padding: 0 3.125rem
}
@media all and (max-width: 768px) {
.inner-inner {
padding:0 2.5rem
}
}
@media all and (max-width: 560px) {
.inner-inner {
padding:0 .9375rem
}
}
@media all and (max-width: 560px) {
.inner-inner--p0sp2 {
padding:0
}
}
.telBT-ic {
display: flex;
border-radius: .625rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
color: #fff;
font-weight: 700;
background-color: #009185;
filter: drop-shadow(0 5px 0 #006837);
transition: all .2s ease 0s;
font-size: 2.125rem
}
.telBT-ic:hover {
translate: 0 5px;
filter: drop-shadow(0 0 0 #644600)
}
.telBT-ic:hover {
text-decoration: none
}
@media (min-width: 1025px) and (max-width:1200px) {
.telBT-ic {
font-size:1.875rem
}
}
@media all and (max-width: 768px) {
.telBT-ic {
padding:.6rem 1rem
}
}
@media all and (max-width: 560px) {
.telBT-ic {
font-size:1.5rem
}
}
.telBT-ic .ic {
width: 3.2em;
height: 3.2em;
border-radius: 50%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}
@media all and (max-width: 560px) {
.telBT-ic .ic {
width:2.8em;
height: 2.8em
}
}
.telBT-ic .ic img {
width: 52.04%;
height: auto
}
.telBT-ic .text {
display: flex;
align-items: center;
flex-direction: column;
line-height: 1.5;
font-size: 1rem
}
.telBT-ic .text span {
font-size: 1.5em
}
.telBT-ic .text strong {
font-size: 2.25em
}
@media all and (max-width: 560px) {
.telBT-ic .text {
font-size:.688rem;
align-items: flex-start
}
}
.telBT-ic .arrow {
width: .85em;
flex-shrink: 0
}
.cvBTWrap {
margin-top: 5rem
}
@media all and (max-width: 1024px) {
.cvBTWrap {
margin-top:3.125rem
}
}
@media all and (max-width: 768px) {
.cvBTWrap {
margin-top:2.5rem
}
}
.cvBT-ic {
display: flex;
background: linear-gradient(0deg,#835a13 0,#f8c058 100%);
border-radius: .625rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
color: #fff;
font-weight: 700;
filter: drop-shadow(0 5px 0 #644600);
transition: all .2s ease 0s;
font-size: 2.125rem
}
.cvBT-ic:hover {
translate: 0 5px;
filter: drop-shadow(0 0 0 #644600)
}
.cvBT-ic:hover {
text-decoration: none
}
@media (min-width: 1025px) and (max-width:1200px) {
.cvBT-ic {
font-size:1.875rem
}
}
@media all and (max-width: 560px) {
.cvBT-ic {
padding:1rem 1rem;
font-size: 1.5rem
}
}
.cvBT-ic .ic {
width: 3.2em;
height: 3.2em;
border-radius: 50%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}
@media all and (max-width: 560px) {
.cvBT-ic .ic {
width:2.8em;
height: 2.8em
}
}
.cvBT-ic .ic img {
width: 70.25%;
height: auto
}
.cvBT-ic .arrow {
width: .85em;
flex-shrink: 0
}
.cvBTWrap {
margin-top: 5rem
}
@media all and (max-width: 1024px) {
.cvBTWrap {
margin-top:3.125rem
}
}
@media all and (max-width: 768px) {
.cvBTWrap {
margin-top:2.5rem
}
}
.cvBT {
display: flex;
background: linear-gradient(90deg,#835a13 0,#f8c058 100%);
border-radius: .625rem;
position: relative;
align-items: center;
justify-content: center;
padding: 1.25rem;
color: #fff;
font-weight: 700;
filter: drop-shadow(0 5px 0 #644600);
margin-left: auto;
margin-right: auto;
max-width: 34.375rem;
transition: all .2s ease 0s;
font-size: 1.5rem
}
@media all and (max-width: 560px) {
.cvBT {
max-width:20.625rem;
padding: .75rem;
gap: .625rem;
border-radius: 1.25rem
}
}
.cvBT:hover {
translate: 0 5px;
filter: drop-shadow(0 0 0 #644600)
}
.cvBT:hover {
text-decoration: none
}
.cvBT .arrow {
width: 1.875rem;
position: absolute;
right: 1.875rem;
top: 50%;
translate: 0 -50%;
border-radius: 50%;
background-color: #b79c58
}
.cvBT .arrow img {
width: 100%;
height: auto
}
@media all and (max-width: 560px) {
.cvBT .arrow {
position:static;
translate: 0
}
}
.fz20 {
font-size: 1.25rem
}
@media all and (max-width: 768px) {
.fz16-sp {
font-size:1rem
}
}
@media all and (max-width: 560px) {
.fz16-sp2 {
font-size:1rem
}
}
.commonHeading {
color: #1977b2;
font-weight: 700;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.4
}
.commonHeading.blue2 {
color: #22b2c8
}
.commonHeading__en {
margin-bottom: .8em
}
.commonHeading__ja {
font-size: 2.25rem
}
.commonHeading__ja .ib {
display: inline-block
}
@media all and (max-width: 560px) {
.commonHeading__ja {
font-size:1.5rem
}
}
.commonHeading2 {
color: #1977b2;
text-align: center;
line-height: 1.5;
font-size: 2.25rem;
font-weight: 700;
position: relative;
padding-bottom: 1.25rem;
margin-bottom: 1.875rem
}
@media all and (max-width: 768px) {
.commonHeading2 {
font-size:1.5rem;
margin-bottom: 1.5625rem;
padding-bottom: .9375rem
}
}
.commonHeading2:after {
content: "";
position: absolute;
width: 3.75rem;
height: .125rem;
border-radius: 1em;
background-color: #1977b2;
bottom: 0;
left: 50%;
translate: -50% 0
}
.commonHeading2--white {
color: #fff
}
.commonHeading2--white:after {
background-color: #fff
}
.commonHeading3 {
color: #1977b2;
text-align: center;
line-height: 1.5;
font-size: 2.25rem;
font-weight: 700;
position: relative
}
.commonHeading3--white {
color: #fff
}
.commonHeading3--blue2 {
color: #22b2c8
}
@media all and (max-width: 768px) {
.commonHeading3 {
font-size:2rem
}
.commonHeading3.fz24-sp {
font-size: 1.5rem
}
}
@media all and (max-width: 560px) {
.commonHeading3.fz24-sp2 {
font-size:1.5rem
}
}
.commonBT {
display: flex;
align-items: center;
color: #fff;
font-weight: 700;
gap: .625rem;
border-bottom: .0625rem solid #fff;
padding-bottom: .1em;
line-height: 1.75;
font-size: 1.5rem;
transition: all .2s ease 0s
}
.commonBT:hover {
text-decoration: none
}
@media all and (max-width: 560px) {
.commonBT {
font-size:1rem
}
}
.commonBT .ic {
width: 1.875rem;
height: 1.875rem;
position: relative
}
.commonBT .ic path {
transition: all .2s ease 0s
}
.commonBT .ic path:hover {
text-decoration: none
}
@media all and (max-width: 560px) {
.commonBT .ic {
width:1.25rem;
height: 1.25rem
}
}
.commonBT .ic:before {
content: "";
background-color: #ccebff;
width: 90%;
height: 90%;
top: 5%;
left: 5%;
position: absolute;
border-radius: 50%;
transition: all .2s ease 0s;
opacity: 0
}
.commonBT .ic:before:hover {
text-decoration: none
}
.commonBT .ic svg {
position: relative;
z-index: 5;
display: block;
width: 100%;
height: auto
}
.commonBT:hover {
color: #ccebff;
border-bottom-color: #ccebff
}
.commonBT:hover .ic:before {
opacity: 1
}
.commonBT--blue {
color: #1977b2;
border-bottom-color: #1977b2
}
.commonBT--blue path {
fill: #1977b2
}
.commonBT--blue:hover {
color: #3b8bbd;
border-bottom-color: #3b8bbd
}
.commonBT--blue:hover .ic:before {
opacity: 0
}
.commonBT--blue:hover .ic path {
fill: #3b8bbd
}
.commonBT--blue2 {
color: #22b2c8;
border-bottom-color: #22b2c8
}
.commonBT--blue2 path {
fill: #22b2c8
}
.commonBT--blue2:hover {
color: #40cce1;
border-bottom-color: #40cce1
}
.commonBT--blue2:hover .ic:before {
opacity: 0
}
.commonBT--blue2:hover .ic path {
fill: #40cce1
}
.breadcrumbs {
background-color: #333;
color: #fff;
font-size: .875rem;
padding: .5em 0
}
.breadcrumbs__wrap {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden
}
.breadcrumbs a {
color: #fff;
text-decoration: underline
}
.breadcrumbs a:hover {
text-decoration: none
}
.pageHeader {
color: #1977b2
}
.pageHeader--blue {
background-color: #1977b2;
color: #fff
}
.pageHeader__inner {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 15.625rem;
max-width: 1000px;
padding-top: 1.875rem;
padding-bottom: 1.875rem
}
@media all and (max-width: 768px) {
.pageHeader__inner {
min-height:12.5rem
}
}
@media all and (max-width: 560px) {
.pageHeader__inner {
min-height:8.3125rem
}
}
.pageHeader__title {
font-weight: 700;
display: flex;
align-items: center;
flex-direction: column;
line-height: 1.5;
justify-content: center;
text-align: center
}
.pageHeader__title em {
font-size: 1.25rem
}
.pageHeader__title span {
font-size: 3rem
}
@media all and (max-width: 768px) {
.pageHeader__title span {
font-size:2.25rem
}
}
.pageHeader__img {
position: absolute;
left: .625rem;
bottom: 0;
width: 13.75rem
}
@media all and (max-width: 768px) {
.pageHeader__img {
width:10.75rem
}
}
@media all and (max-width: 560px) {
.pageHeader__img {
display:none
}
}
.pageHeader__img .balloon {
width: 4rem;
position: absolute;
top: 1.5rem;
right: -.9375rem
}
@media all and (max-width: 768px) {
.pageHeader__img .balloon {
width:2.6875rem;
top: 1.25rem;
right: 0
}
}
.voiceList {
max-width: 55rem;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 3.125rem
}
@media all and (max-width: 1024px) {
.voiceList {
max-width:46.5rem;
gap: 2.5rem
}
}
@media all and (max-width: 768px) {
.voiceList {
gap:1.875rem
}
}
.voiceList__item {
color: #fff;
font-weight: 700;
position: relative
}
@media all and (max-width: 768px) {
.voiceList__item {
padding-top:7.8125rem
}
}
@media all and (max-width: 560px) {
.voiceList__item {
padding-top:7.125rem
}
}
.voiceList__itemIn {
background-color: #22b2c8;
padding: 1.25rem;
display: flex;
align-items: flex-start
}
@media all and (max-width: 768px) {
.voiceList__itemIn {
padding:1.25rem 1.875rem
}
}
@media all and (max-width: 560px) {
.voiceList__itemIn {
padding:.625rem 1.25rem
}
}
.voiceList__img {
width: 9.375rem;
flex-shrink: 0;
margin-right: 1.25rem
}
@media all and (max-width: 768px) {
.voiceList__img {
width:12.5rem;
position: absolute;
top: 7.8125rem;
left: 50%;
translate: -50% -100%
}
}
@media all and (max-width: 560px) {
.voiceList__img {
width:11.25rem;
top: 7.125rem
}
}
.aside-flowLink {
border: .125rem solid #1977b2;
border-radius: 1.25rem;
padding: 1.875rem 2.5rem
}
@media all and (max-width: 1024px) {
.aside-flowLink {
margin:0 auto;
max-width: 600px
}
}
@media all and (max-width: 768px) {
.aside-flowLink {
padding:1.875rem 2.5rem;
max-width: 100%;
padding: 1.5625rem 1.25rem
}
}
.aside-flowLink__inner {
max-width: 880px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 1.875rem;
justify-content: space-between
}
@media all and (max-width: 1024px) {
.aside-flowLink__inner {
flex-direction:column
}
}
@media all and (max-width: 768px) {
.aside-flowLink__inner {
max-width:100%;
gap: 1.25rem
}
}
.aside-flowLink__content {
max-width: 404px
}
@media all and (max-width: 768px) {
.aside-flowLink__content {
max-width:100%
}
}
.aside-flowLink__heading {
font-weight: 700;
color: #1977b2;
line-height: 1.5;
border-bottom: .125rem solid #1977b2;
font-size: 1.5rem;
padding-bottom: .2em;
margin-bottom: .9375rem
}
@media all and (max-width: 768px) {
.aside-flowLink__heading {
font-size:1.25rem
}
}
.aside-flowLink__text {
font-weight: 700;
font-size: 1.125rem
}
@media all and (max-width: 768px) {
.aside-flowLink__text {
font-size:1rem
}
}
.aside-flowLink__btWrap {
max-width: 400px;
width: 100%
}
@media all and (max-width: 768px) {
.aside-flowLink__btWrap {
max-width:100%
}
}
.aside-flowLink__btWrap a {
display: flex;
background-color: #1977b2;
border-radius: .625rem;
position: relative;
align-items: center;
justify-content: center;
padding: 1rem;
color: #fff;
font-weight: 700;
filter: drop-shadow(0 5px 0 #0053a6);
margin-left: auto;
margin-right: auto;
width: 100%;
transition: all .2s ease 0s
}
@media all and (max-width: 560px) {
.aside-flowLink__btWrap a {
max-width:21.875rem;
padding: .75em .5rem;
gap: .625rem
}
}
.aside-flowLink__btWrap a:hover {
translate: 0 5px;
filter: drop-shadow(0 0 0 #0053a6)
}
.aside-flowLink__btWrap a:hover {
text-decoration: none
}
.aside-flowLink__btWrap a .text {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center
}
.aside-flowLink__btWrap a .text strong {
font-size: 1.25rem
}
.aside-flowLink__btWrap a .arrow {
width: 1.25rem;
position: absolute;
right: .9375rem;
top: 50%;
translate: 0 -50%;
border-radius: 50%;
background-color: #1977b2
}
.aside-flowLink__btWrap a .arrow img {
width: 100%;
height: auto
}
@media all and (max-width: 560px) {
.aside-flowLink__btWrap a .arrow {
position:static;
translate: 0
}
}
.fv {
background: linear-gradient(180deg,#1977b2 0,#0053a6 100%)
}
.fv__inner {
max-width: 1400px;
margin: 0 auto;
position: relative
}
.fv .inner {
min-height: 600px;
display: flex;
align-items: center
}
@media (max-width: 876px) {
.fv .inner {
position:relative;
min-height: 1px;
padding: 9.302vw 4.651vw 69.765vw
}
}
@media all and (max-width: 560px) {
.fv .inner {
padding:18.604vw 4.651vw 78.1368vw
}
}
.fv__content {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center
}
@media all and (min-width: 1025px) {
.fv__content {
align-items:center
}
}
@media all and (max-width: 1024px) {
.fv__content {
width:100%
}
}
.fv__img {
width: 100%;
position: absolute;
bottom: 0;
right: 0;
height: 100%
}
.fv__img img {
-o-object-fit: contain;
object-fit: contain;
-o-object-position: right bottom;
object-position: right bottom
}
.fv__lead {
color: #fff;
font-weight: 700;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-size: 2.75rem;
line-height: 1.35;
margin-bottom: 1.3em;
white-space: nowrap
}
@media all and (max-width: 1024px) {
.fv__lead {
width:100%;
margin-bottom: 1.5em
}
}
@media (max-width: 990px) {
.fv__lead {
margin-bottom:2em
}
}
@media (max-width: 876px) {
.fv__lead {
margin-bottom:4.651vw
}
}
@media all and (max-width: 560px) {
.fv__lead {
font-size:1.5rem;
margin-bottom: 5.81375vw
}
}
.fv__lead__first strong {
font-size: 4.5rem
}
@media all and (max-width: 560px) {
.fv__lead__first strong {
font-size:2.5rem
}
}
.fv__lead__first sup {
vertical-align: top;
position: relative;
top: -.2em;
font-size: 2.25rem;
letter-spacing: -.2em
}
@media all and (max-width: 560px) {
.fv__lead__first sup {
font-size:1.5rem
}
}
.fv__lead__second strong {
color: #ffeb22
}
.fv__points {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
max-width: 630px;
width: 100%;
justify-content: space-between;
gap: 1.875em;
margin-bottom: 3.875em
}
@media all and (max-width: 1024px) {
.fv__points {
max-width:610px;
gap: 1.25em;
margin-bottom: 3.5em
}
}
@media (max-width: 990px) {
.fv__points {
max-width:500px
}
}
@media (max-width: 876px) {
.fv__points {
max-width:81.3925vw;
width: 100%;
margin-bottom: 0;
position: absolute;
bottom: 0;
left: 50%;
z-index: 50;
translate: -50% 50%
}
}
@media all and (max-width: 560px) {
.fv__points {
max-width:calc(100% - 9.302vw);
gap: 3.48825vw
}
}
.fv__points__item {
display: flex;
padding: 3px;
background: linear-gradient(90deg,#877700 0,#ddb93f 30%,#b1872f 67%,#664215 97%);
color: #fff;
font-size: 1.25rem;
font-weight: 700;
filter: drop-shadow(3px 3px 4px rgba(45, 49, 61, .55))
}
@media all and (max-width: 768px) {
.fv__points__item {
padding:.69765vw;
filter: drop-shadow(.69765vw .69765vw .9302vw rgba(45, 49, 61, .55))
}
}
@media all and (max-width: 560px) {
.fv__points__item {
padding:.4651vw;
filter: drop-shadow(.69765vw .69765vw .9302vw rgba(45, 49, 61, .55))
}
}
.fv__points__inner {
background: linear-gradient(300.57deg,#877700 -11.29%,#ddb93f 19.16%,#b1872f 56.72%,#664215 87.18%);
padding: .5em .3em;
font-size: 1.25rem;
line-height: 1.25;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center
}
@media (max-width: 990px) {
.fv__points__inner {
font-size:1rem
}
}
@media (max-width: 876px) {
.fv__points__inner {
font-size:1.25rem
}
}
@media all and (max-width: 560px) {
.fv__points__inner {
font-size:.813rem
}
}
.fv__points__inner>span {
filter: drop-shadow(0 2px 0 #877700)
}
.fv__points__inner strong {
font-size: 1.8em
}
.fv__points__inner strong+strong {
font-size: 2.2em
}
@media all and (max-width: 560px) {
.fv__points__inner strong+strong {
font-size:1.6em
}
}
@media all and (max-width: 560px) {
.fv__points__inner strong {
font-size:1.6em
}
}
.fv__copy {
padding: 4px;
font-size: 1.5rem;
border: 1px solid #fff;
border-radius: 4em;
color: #fff;
font-weight: 700
}
@media all and (max-width: 1024px) {
.fv__copy {
font-size:1.25rem;
max-width: 552px;
margin-left: 1.5em
}
}
@media (max-width: 990px) {
.fv__copy {
font-size:1rem;
max-width: 460px
}
}
@media (max-width: 876px) {
.fv__copy {
font-size:1.25rem;
max-width: 131.1582vw;
margin: 0 auto
}
}
@media all and (max-width: 560px) {
.fv__copy {
font-size:.75rem;
max-width: 83.718vw
}
}
.fv__copy__inner {
padding: 0 1.25em;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #fff;
border-radius: 4em
}
.fv__copy__inner strong {
padding: 0 .2em;
font-size: 1.5em
}
@media all and (max-width: 1024px) {
.fv__copy__inner strong {
font-size:1.6em
}
}
.top-cv {
background-color: #fff;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
overflow: hidden;
position: relative
}
.top-cv__bgLeft {
width: 100%;
height: 100%;
position: absolute;
background-color: #22b2c8;
transform-origin: top right;
top: 0;
transform: skew(-18deg)
}
@media all and (min-width: 1025px) {
.top-cv__bgLeft {
right:50%;
translate: -336px 0
}
}
.top-cv__bgLeft:after {
content: "";
background-color: #fff;
right: 5px;
width: 8px;
top: 0;
height: 100%;
position: absolute
}
@media all and (max-width: 1024px) {
.top-cv__bgLeft {
width:258px;
left: 0;
transform: skew(-14deg)
}
}
@media (max-width: 876px) {
.top-cv__bgLeft {
width:33.59282421vw
}
}
@media all and (max-width: 560px) {
.top-cv__bgLeft {
width:51.161vw
}
}
.top-cv__bgRight {
width: 100%;
height: 100%;
position: absolute;
background-color: #22b2c8;
transform-origin: top left;
top: 0;
transform: skew(18deg)
}
@media all and (min-width: 1025px) {
.top-cv__bgRight {
left:50%;
translate: 336px 0
}
}
.top-cv__bgRight:after {
content: "";
background-color: #fff;
left: 5px;
width: 8px;
top: 0;
height: 100%;
position: absolute
}
@media all and (max-width: 1024px) {
.top-cv__bgRight {
width:258px;
right: 0;
transform: skew(14deg)
}
}
@media (max-width: 876px) {
.top-cv__bgRight {
width:33.59282421vw
}
}
@media all and (max-width: 560px) {
.top-cv__bgRight {
display:none
}
}
.top-cv__container {
position: relative;
z-index: 10;
left: -10px;
padding-right: 10px;
display: flex;
align-items: center;
justify-content: space-between
}
@media all and (max-width: 1024px) {
.top-cv__container {
left:0;
padding-right: 0;
flex-direction: column;
padding: 40px 0 55px
}
}
@media (max-width: 876px) {
.top-cv__container {
padding:15.6245694vw 0 5.859213525vw;
max-width: 33.125em;
margin-left: auto;
margin-right: auto
}
}
@media all and (max-width: 560px) {
.top-cv__container {
padding:17.44125vw 0 8.13925vw
}
}
.top-cv__header {
width: 47%;
position: relative;
display: flex
}
@media all and (max-width: 1024px) {
.top-cv__header {
width:100%
}
}
@media (max-width: 876px) {
.top-cv__header {
flex-direction:row-reverse;
align-items: flex-start;
justify-content: space-between;
padding: 0 1.875em 0 1.25em
}
}
@media all and (max-width: 560px) {
.top-cv__header {
padding:0 1.875rem 0 2.25rem
}
}
.top-cv__heading {
position: absolute;
z-index: 10;
left: 0;
font-size: 1.25rem;
top: 1.9em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-color: #fff;
color: #1977b2;
font-weight: 700;
border: 2px solid #1977b2;
border-radius: 1em;
padding: 1em 1em .8em;
line-height: 1.4
}
@media all and (max-width: 1024px) {
.top-cv__heading {
left:auto;
right: 50%;
translate: -35% 0
}
}
@media (max-width: 876px) {
.top-cv__heading {
position:relative;
top: 0;
right: 0;
translate: 0 0;
white-space: nowrap
}
}
@media all and (max-width: 560px) {
.top-cv__heading {
font-size:1rem;
translate: 0 -10%;
padding: 1.2em 1.2em 1em
}
}
.top-cv__heading .strong {
font-size: 1.7em
}
@media all and (max-width: 1024px) {
.top-cv__heading .strong {
font-size:1.6em
}
}
@media all and (max-width: 560px) {
.top-cv__heading .strong {
font-size:1.5em
}
}
.top-cv__heading:before {
content: "";
position: absolute;
width: 1em;
height: 1em;
bottom: 0;
right: 1.5em;
background-color: #fff;
z-index: 5;
translate: 0 50%
}
@media (max-width: 876px) {
.top-cv__heading:before {
right:auto;
left: 1.5em
}
}
.top-cv__heading:after {
content: "";
position: absolute;
width: 2px;
border-radius: 2px;
height: 1.5em;
background-color: #1977b2;
right: 2.25em;
z-index: 10;
bottom: 0;
translate: 0 80%;
transform-origin: top center;
rotate: -40deg
}
@media (max-width: 876px) {
.top-cv__heading:after {
right:auto;
left: 2.25em;
rotate: 40deg
}
}
@media all and (max-width: 560px) {
.top-cv__heading:after {
rotate:30deg
}
}
.top-cv__person {
margin-left: auto
}
.top-cv__person img {
height: auto
}
@media all and (min-width: 1025px) {
.top-cv__person {
width:272px
}
}
@media (min-width: 1025px) and (max-width:1200px) {
.top-cv__person {
left:calc(292px - 22vw);
position: relative
}
}
@media all and (max-width: 1024px) {
.top-cv__person {
margin-right:auto;
width: 256px
}
}
@media (max-width: 876px) {
.top-cv__person {
width:18em;
transform-origin: bottom left;
scale: 1.1
}
.top-cv__person img {
width: 100%
}
}
@media all and (max-width: 560px) {
.top-cv__person {
scale:1.03
}
}
.top-cv__btWrap {
width: 48.6%
}
@media all and (max-width: 1024px) {
.top-cv__btWrap {
width:100%;
max-width: 530px
}
}
@media (max-width: 876px) {
.top-cv__btWrap {
max-width:33.125em
}
}
@media all and (max-width: 560px) {
.top-cv__btWrap {
max-width:83.718vw
}
}
.top-intro {
background-color: #158058;
padding:1rem 0.625rem;
}
.top-intro__container {
padding: 5.25rem 3.125rem;
background-color: #fff;
border-radius: 1.25rem
}
@media all and (max-width: 1024px) {
.top-intro__container {
padding:2.5rem 3.125rem
}
}
@media all and (max-width: 768px) {
.top-intro__container {
padding:2.5rem 2.5rem 3.125rem
}
}
@media all and (max-width: 560px) {
.top-intro__container {
padding:1.25rem 1.25rem 2.1875rem
}
}
@media all and (max-width: 560px) {
.top-intro__container {
border-radius:.625rem
}
}
.top-intro__container__inner {
max-width: 900px;
margin: 0 auto
}
.top-intro__heading {
display: flex;
align-items: flex-start;
gap: 1.25rem;
margin-bottom: 2.5rem
}
/*
@media all and (max-width: 560px) {
.top-intro__heading {
gap:1rem;
margin-bottom: 2.125rem
}
}*/
.top-intro__heading .ic {
width: 6.1875rem;
flex-shrink: 0
}
.top-intro__heading .ic img {
width: 100%;
height: auto
}
@media all and (max-width: 1024px) {
.top-intro__heading .ic {
width:5.625rem
}
}
@media all and (max-width: 768px) {
.top-intro__heading .ic {
width:3.875rem
}
}
@media all and (max-width: 560px) {
.top-intro__heading .ic {
width:2.9375rem
}
}
.top-intro__heading .text {
font-weight: 700;
color: #158058;
font-size: 2.75rem;
line-height: 2;
}
@media all and (max-width: 768px) {
.top-intro__heading .text {
font-size:2.688rem;
line-height: 2;
}
}
@media all and (max-width: 560px) {
.top-intro__heading .text {
font-size: 1.458rem;
line-height: 1.8;
}
}
.top-intro__list {
display: grid;
grid-template-columns: 1fr;
gap: 3.75rem
}
@media all and (max-width: 768px) {
.top-intro__list {
gap:2.5rem
}
}
.top-intro__list__item {
position: relative
}
@media all and (min-width: 769px) {
.top-intro__list__item {
padding-left:8.125rem;
padding-right: 16.25rem
}
}
@media all and (min-width: 769px) and (max-width:1024px) {
.top-intro__list__item {
padding-right:13.75rem
}
}
@media all and (max-width: 560px) {
.top-intro__list__item {
padding-bottom:12rem
}
}
@media all and (max-width: 768px) {
.top-intro__list__header {
display:flex;
align-items: center;
justify-content: space-between;
margin-bottom: .5em
}
}
@media all and (max-width: 560px) {
.top-intro__list__header {
margin-bottom:1em;
}
}
.top-intro__list__point {
width: 6.25rem;
height: 6.25rem;
border: .125rem solid #158058;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #158058;
font-weight: 700;
position: relative;
flex-shrink: 0;
}
@media all and (min-width: 769px) {
.top-intro__list__point {
position:absolute;
color: #158058;
top: 0;
left: 0;
}
}
@media all and (max-width: 768px) {
.top-intro__list__point {
width:4.75rem;
height: 4.75rem;
color: #158058;
}
}
.top-intro__list__point span {
padding: 0 .4em;
background-color: #fff;
font-size:2.813rem;
position: absolute;
top: 0;
left: 50%;
translate: -50% -20%;
}
@media all and (max-width: 560px) {
.top-intro__list__point span {
font-size:2.013rem;
}
}
.top-intro__list__point em {
font-size: 1.75rem
}
@media all and (max-width: 560px) {
.top-intro__list__point em {
font-size:1.5rem
}
}
.top-intro__list__point:after {
content: "";
width: .5em;
height: .5em;
background-color: #fff;
rotate: -45deg;
position: absolute;
bottom: 0;
right: 0;
translate: -100% -100%
}
.top-intro__list__heading {
font-weight: 700;
color: #158058;
font-size: 2.3rem
}
@media all and (max-width: 768px) {
.top-intro__list__heading {
width:100%;
max-width: 100%;
color: #158058;
padding-left: 1.5em;
}
}
@media all and (max-width: 560px) {
.top-intro__list__heading {
color: #158058;
padding-left:1.1em;
}
}
@media all and (min-width: 769px) {
.top-intro__list__text {
max-width:55rem;
}
}
@media all and (min-width: 769px) and (max-width:1024px) {
.top-intro__list__text {
/* max-width:27.5rem */
max-width:50rem;
}
}
.top-intro__list__img {
width: 15.125rem;
}
@media all and (min-width: 769px) {
.top-intro__list__img {
position:absolute;
right: 0;
top: 0
}
}
@media all and (min-width: 1025px) {
.top-intro__list__img {
top:50%;
translate: 0 -50%
}
}
@media all and (max-width: 1024px) {
.top-intro__list__img {
width:12.5rem
}
}
@media all and (max-width: 560px) {
.top-intro__list__img {
position:absolute;
bottom: 0;
left: 50%;
translate: -50% 0;
width: 16.25rem
}
}
.top-intro__list__img img {
width: 100%;
height: auto
}
@media all and (max-width: 768px) {
.top-intro__list__img {
flex-shrink:0
}
}
/* 2025.02.11 */
/* @media all and (max-width: 768px) {
.top-intro__list__header {
display:flex;
align-items: center;
justify-content: space-between;
margin-bottom: .5em
}
}
@media all and (max-width: 560px) {
.top-intro__list__header {
margin-bottom:1em;
}
} */
.top-intro__list__heading_icon {
/*width:100%;
max-width: 100%;*/
font-weight: 700;
color: #158058;
font-size: 1.3rem;
border-bottom:2px dashed #a61919; /*下線の太さ 種類 色*/
}
.top-intro__list__heading_icon:before {
content: url("../img/cost_over.png"); /*画像のURL*/
width:20px;
height: auto;
margin-right:20px; /*画像右の余白*/
}
.top-intro__list__icon {
width: 6.25rem;
height: 6.25rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: 700;
position: relative;
flex-shrink: 0;
background-image: url("../img/folder_837815.png");
background-repeat: no-repeat; /* 画像の繰り返しを指定 */
width:auto; /* 横幅のサイズを指定 */
height:400pX; /* 縦幅のサイズを指定 */
}
@media all and (min-width: 769px) {
.top-intro__list__icon {
position:absolute;
top: 0;
left: 0;
background-image: url("../img/folder_837815.png");
background-repeat: no-repeat; /* 画像の繰り返しを指定 */
width:auto; /* 横幅のサイズを指定 */
height:400pX; /* 縦幅のサイズを指定 */
}
}
@media all and (max-width: 768px) {
.top-intro__list__icon {
background-image: url("../img/folder_837815.png");
background-repeat: no-repeat; /* 画像の繰り返しを指定 */
width:auto; /* 横幅のサイズを指定 */
height:400pX; /* 縦幅のサイズを指定 */
}
}
/*
.top-intro__list__point span {
padding: 0 .4em;
background-color: #fff;
font-size:2.813rem;
position: absolute;
top: 0;
left: 50%;
translate: -50% -20%;
}
@media all and (max-width: 560px) {
.top-intro__list__point span {
font-size:2.013rem;
}
}
.top-intro__list__point em {
font-size: 1.75rem
}
@media all and (max-width: 560px) {
.top-intro__list__point em {
font-size:1.5rem
}
}
.top-intro__list__point:after {
content: "";
width: .5em;
height: .5em;
background-color: #fff;
rotate: -45deg;
position: absolute;
bottom: 0;
right: 0;
translate: -100% -100%
}
.top-intro__list__heading {
font-weight: 700;
color: #158058;
font-size: 2.3rem
}
@media all and (max-width: 768px) {
.top-intro__list__heading {
width:100%;
max-width: 100%;
color: #158058;
padding-left: 1.5em;
}
}
@media all and (max-width: 560px) {
.top-intro__list__heading {
color: #158058;
padding-left:1.1em;
}
}
@media all and (min-width: 769px) {
.top-intro__list__text {
max-width:55rem;
}
} */
/*********************/
.top-intro__cvWrap {
margin-top: 4.375rem
}
@media all and (max-width: 768px) {
.top-intro__cvWrap {
margin-top:3.125rem
}
}
@media all and (max-width: 560px) {
.top-intro__cvWrap {
margin-top:1.25rem
}
}
.fuchi{
display: inline-block;
font-family: 'Anton', sans-serif;
font-size:xx-large;
color:#EE3333;
letter-spacing:-0.04em;
text-shadow:
-1px 0px 0 #000;
/* -2px 2px 0 #000
2px -2px 0 #000,
-2px -2px 0 #000; */
/*-webkit-text-stroke: 2px #FFF;
text-stroke: 2px #FFF; */
padding:0 0.2em;
}