@charset "UTF-8"; /*------------------------- __top_style -------------------------*/ #main{ overflow-x: hidden;} /*------------------------- __top_slider -------------------------*/ #main_img{} #main_img > .inner{ width: 100%; height: 700px; margin-bottom: 80px; padding: 0 50px; box-sizing: border-box; position: relative;} #main_img .inner .slider{ width: 100%; height: 700px;} #main_img .inner .slider img{ width: 100%; height: 700px; object-fit: cover;} #main_img .inner .slider_catchcopy{ position: absolute; top: 50%; left: 90px; transform: translateY(-50%); -webkit- transform: translateY(-50%); z-index: 2;} #main_img .inner .slider_catchcopy h1{ font-size: 1em;} #main_img .inner .slider_catchcopy span{ display: block; color: #fff;} #main_img .inner .slider_catchcopy span.en_text{ font-size: 7.7em; line-height: 1.2em; margin-bottom: 60px;} #main_img .inner .slider_catchcopy span.jp_text{ font-size: 2.8em;} #main_img .inner .member_box{ position: absolute; bottom: 0; right: 50px; width: 280px; height: 270px; background-color: #2A2C8B; padding: 30px; box-sizing: border-box; z-index: 20;} #main_img .inner .member_box .inner{} #main_img .inner .member_box .inner table{ width: 100%; border-collapse: collapse; margin-bottom: 20px;} #main_img .inner .member_box .inner table tr{ border: 1px solid #fff;} #main_img .inner .member_box .inner table tr th, #main_img .inner .member_box .inner table tr td{ padding: 8px; box-sizing: border-box; color: #fff; border-top: 1px solid #fff; font-size: 1.2em;} #main_img .inner .member_box .inner table tr td{ text-align: right;} #main_img .inner .member_box .inner table tr td span{ font-size: 1.3em;} #main_img .inner .member_box .inner .member_join_btn{ text-align: center; width: 100%; height: 54px; margin-bottom: 20px;} #main_img .inner .member_box .inner .member_join_btn a{ display: block; font-size: 1.8em; font-weight: 700; color: #fff; line-height: 54px; /*background:linear-gradient(to right,#008F2A, #4BCD6E);*/ background: linear-gradient(270deg, #B4DE4F 0%, #4BCD6E 25%, #4BCD6E 51%, #008F2A 100%); background-position: 1% 50%; background-size: 200% auto; border-radius: 5px;} #main_img .inner .member_box .inner .member_login_btn{ text-align: center;} #main_img .inner .member_box .inner .member_login_btn a{ color: #fff; font-size: 1.3em; text-decoration: underline;} #main_img .inner .slider .slick-dots{ bottom: 25px!important;} #main_img .inner .slider .slick-dots li{ width:20px!important; vertical-align: middle;} #main_img .inner .slider .slick-dots li button:before{ opacity: 1!important; color: #fff!important;} #main_img .inner .slider .slick-dots li.slick-active button:before{ color: #2a2c8b!important;} #main_img .inner .member_box .inner #mem_top_login{ text-align: center;} #main_img .inner .member_box .inner #mem_top_login .member_logout_btn{ margin:40px auto 15px;} #main_img .inner .member_box .inner #mem_top_login .member_logout_btn a{ display: inline-block; background-color: #fff; border-radius: 5px; padding: 10px 13px; font-size: 1.2em; color: #2A2C8B; cursor: pointer;} #main_img .inner .member_box .inner #mem_top_login .member_change_btn a{ font-size: 1.2em; color: #fff; cursor: pointer;} ul.slider .slick-track li{ position: relative;} ul.slider .slick-track li:before{ content: ""; display: block; width: 100%; height: 100%; background-image: url(/images/slider_stripe.png); background-repeat: repeat; position: absolute; z-index: 1;} ul.slider .slick-track li img{ z-index: 0;} @media screen and (min-width: 768px) { #main_img .inner .member_box{ display: none;} #main_img .inner .member_box .inner .member_join_btn a:hover{background-position: 99% 50%;} #main_img .inner .member_box .inner .member_login_btn a:hover{ opacity: 0.6;} #main_img .inner .member_box .inner #mem_top_login .member_logout_btn a:hover, #main_img .inner .member_box .inner #mem_top_login .member_change_btn a:hover{ opacity: 0.6;} } @media screen and (max-width: 767px) { #main_img > .inner{ padding: 0; height: auto; margin-bottom: 0;} #main_img .inner .slider{ height: 300px; margin-bottom: 0;} #main_img .inner .slider img{ height: 300px;} #main_img .inner .slider .slick-list{ height: 300px!important;} #main_img .inner .slider_catchcopy{ position: absolute; /*top: calc(50% - 70px);*/ left: 20px;} #main_img .inner .slider_catchcopy span.en_text{ font-size: 2.7em; line-height: 1.2em; margin-bottom: 20px;} #main_img .inner .slider_catchcopy span.jp_text{ font-size: 1.4em;} #main_img .inner .member_box{ position: relative; right: 0; width: 100%; height: auto; padding: 15px 20px; margin-bottom: 40px;} #main_img .inner .member_box .inner{ display: flex; align-items: center;} #main_img .inner .member_box .inner table{ width: 50%; margin-bottom: 0;} #main_img .inner .member_box .inner > div{ width: calc(50% - 15px); margin-left: 15px;} #main_img .inner .member_box .inner table tr th, #main_img .inner .member_box .inner table tr td{ padding: 6px; font-size: 1em;} #main_img .inner .member_box .inner .member_join_btn{ margin-bottom: 15px; height: 44px;} #main_img .inner .member_box .inner .member_join_btn a{ font-size: 1.5em; line-height: 44px;} #main_img .inner .slider .slick-dots{ bottom: 10px!important;} #main_img .inner .member_box .inner #mem_top_login .member_logout_btn{ margin:0 auto 15px;} #main_img .inner .member_box .inner #mem_top_login .member_logout_btn a, #main_img .inner .member_box .inner #mem_top_login .member_change_btn a{ font-size: 1.2em; text-decoration: none;} } /*------------------------- __topics -------------------------*/ #topics_box{ margin-bottom: 130px;} #topics_box .inner{ padding: 0 50px; box-sizing: border-box; display: flex;} #topics_box .inner .topics_left, #topics_box .inner .topics_right{ background-color: #fff; width: calc(50% - 1px); padding: 40px; box-sizing: border-box;} #topics_box .inner .topics_left{ margin-right: 2px;} #topics_box .inner .topics_title{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;} #topics_box .inner .topics_title .title_text{} #topics_box .inner .topics_title .title_text span:nth-child(1){ font-size: 2.7em; margin-right: 10px;} #topics_box .inner .topics_title .title_text span:nth-child(2){ font-size: 1.4em;} #topics_box .inner .topics_title .more_btn{} #topics_box .inner .topics_title .more_btn a{ font-size: 1.3em; text-decoration: underline;} #topics_box .inner .topics_list{} #topics_box .inner .topics_list dl{ font-size: 1.4em; line-height: 1.8; display: flex;} #topics_box .inner .topics_list dl dt{ width: 85px;} #topics_box .inner .topics_list dl dd{ width: calc(100% - 85px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #topics_box .inner .topics_list dl dd a{ text-decoration: underline;} #topics_box .inner .topics_list ul{} #topics_box .inner .topics_list ul li{ display: flex; align-items: center;} #topics_box .inner .topics_list ul li p.topics_icon{ padding: 4px 0; width: 50px; margin-right: 10px; text-align: center; font-size: 1.2em; line-height: 1; box-sizing: border-box;} #topics_box .inner .topics_list ul li p.topics_icon.new{ color: #fa1e1e; border: 1px solid #fa1e1e;} #topics_box .inner .topics_list ul li p.topics_icon.price{ color: #2A2C8B; border: 1px solid #2A2C8B;} #topics_box .inner .topics_list ul li p.topics_data{ width: calc(100% - 60px); font-size: 1.4em; line-height: 1.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #topics_box .inner .topics_list ul li p.topics_data a{ text-decoration: underline;} @media screen and (min-width: 768px) { #topics_box .inner .topics_title .more_btn a:hover, #topics_box .inner .topics_list dl dd a:hover, #topics_box .inner .topics_list ul li p.topics_data a:hover{ opacity: 0.4;} } @media screen and (max-width: 767px) { #topics_box{ margin-top: 20px; margin-bottom: 40px;} #topics_box .inner{ padding: 0 20px; display: block;} #topics_box .inner .topics_left, #topics_box .inner .topics_right{ width: 100%; padding: 20px;} #topics_box .inner .topics_left{ margin-bottom: 5px;} #topics_box .inner .topics_title{ margin-bottom: 15px;} #topics_box .inner .topics_title .title_text span{ display: block;} #topics_box .inner .topics_title .title_text span:nth-child(1){ font-size: 1.8em; margin-right: 0; margin-bottom: 5px;} #topics_box .inner .topics_title .title_text span:nth-child(2){ font-size: 1.2em;} #topics_box .inner .topics_title .more_btn{} #topics_box .inner .topics_title .more_btn a{ font-size: 1.2em;} #topics_box .inner .topics_list dl{ font-size: 1.2em; line-height: 1.6;} #topics_box .inner .topics_list dl dt{ width: 80px;} #topics_box .inner .topics_list dl dd{ width: calc(100% - 80px);} #topics_box .inner .topics_list ul li{ margin-bottom: 3px;} #topics_box .inner .topics_list ul li p.topics_icon{ padding: 3px 0 1px; font-size: 1em; width: 45px; margin-right: 5px;} #topics_box .inner .topics_list ul li p.topics_data{ font-size: 1.2em; line-height: 1.6; width: calc(100% - 50px);} } /*------------------------- __pickup -------------------------*/ #pickup_box{ overflow-x: hidden; padding-bottom: 130px;} #pickup_box .inner{ max-width: 100%; margin: 0 auto; padding: 0;} /*タブ設定*/ #pickup_box .inner .pickup_tab{ display: flex; cursor: pointer; color: #2A2C8B; width: 850px; margin: 0 auto 60px;} #pickup_box .inner .pickup_tab .tab_p{ width: calc(100%/5); text-align: center; font-size: 1.4em; padding: 10px 0; box-sizing: border-box; background-color: #fff;} #pickup_box .inner .pickup_tab .tab_p:nth-child(n+2) { border-left: 3px solid #F0F0F0;} #pickup_box .inner .pickup_tab .tab_p:first-child{ border-radius: 5px 0 0 5px;} #pickup_box .inner .pickup_tab .tab_p:last-child{ border-radius: 0 5px 5px 0;} #pickup_box .inner .pickup_tab .tab_p.active { background-color: #2A2C8B; color: #fff;} #pickup_box .inner .pickup_panel .panel_p { display: none; text-align: center;} #pickup_box .inner .pickup_panel .panel_p.active { display: block;} #pickup_box .inner .title_box{ padding: 0 50px; box-sizing: border-box; max-width: 1200px; margin: 0 auto 50px; text-align: left;} #pickup_box .inner .title_box .title_text{ font-size: 1.6em;} #pickup_box .inner .title_box span:nth-child(1){ font-size: 2.5em; margin-right: 10px;} #pickup_box .inner .pickup_list{position:initial;} #pickup_box .inner .pickup_list .slick-track { display: flex;} #pickup_box .inner .pickup_list .slick-slide { height: auto !important;} #pickup_box .inner .pickup_list .bukken_box{ border: 1px solid #D2D2D2; height: auto; margin-right: -1px; position: relative; text-align: left;} #pickup_box .inner .pickup_list .bukken_box a{ display: block; width: 100%; height: 100%; padding: 30px; box-sizing: border-box; background-color:#F0F0F0;} #pickup_box .inner .pickup_list .bukken_box .bukken_pic{ margin-bottom: 25px;} #pickup_box .inner .pickup_list .bukken_box .bukken_pic span{display: block; width: 100%; height: 0; background-color: #fff; padding-top: 75%; overflow: hidden; position: relative;} #pickup_box .inner .pickup_list .bukken_box .bukken_pic span img{width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;} #pickup_box .inner .pickup_list .bukken_box .bukken_text{ position: relative; width: 100%; height: auto;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .title{ font-size: 1.8em; line-height: 1.2em; margin-bottom: 12px;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .data{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .data .syubetsu{ font-size: 1.1em; background-color: #DCDCDC; padding: 3px 5px; box-sizing: border-box;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .data .price{ font-size: 1.5em; color: #fa1e1e;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .data .price > span{ font-size: 0.8em;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .address{ font-size: 1.3em; line-height: 1.3; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .railway{ font-size: 1.3em; line-height: 1.3; margin-bottom: 7px;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .comment{ font-size: 1.3em; line-height: 1.3; color: #A0A0A4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .member{ width: 100%; height: auto; /*position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);*/ margin-top: calc(50% - 70px); text-align: center; font-size: 1.7em; line-height: 1.4em; font-weight: 700; color: #2A2C8B;} /* スライダー設定 */ #pickup_box .inner .pickup_list { max-width: 430px; margin: 0 auto 25px; padding: 0;} #pickup_box .inner .pickup_list .slick-list { overflow: visible;} #pickup_box .inner{ position: relative;} #pickup_box .inner .slick-dots { margin: 20px auto 0; position: initial;} #pickup_box .inner .slick-dots li { position: relative; display: inline-block; width: auto; height: auto; margin: 0; padding: 0; cursor: pointer;} #pickup_box .inner .slick-dots li button { font-size: 0; line-height: 0; padding: 0; cursor: pointer; color: transparent; border: 0; text-indent: -9999px; display: block; width: 8px; height: 8px; margin: 0 8px; outline: 0; border-radius: 5px; transition-duration: 0.3s; background: #fff;} #pickup_box .inner .slick-dots li button:before { content: none;} #pickup_box .inner .slick-dots li button:hover, #pickup_box .inner .slick-dots li.slick-active button { width: 8px; height: 8px; background: #2a2c8b;} p.new_tag{ position: absolute; top: 0; left: 0; border-left: 85px solid #fa1e1e; border-bottom: 85px solid transparent; z-index: 100;} p.new_tag > span{ display: block; position: relative;} p.new_tag > span span{ display: block; position: absolute; top: 18px; left: -75px; font-size: 1.8em; color: #fff; transform:rotate(-45deg); } #pickup_box .inner .more_btn{ text-align: center; width: 300px; height: 80px; margin:0 auto 20px;} #pickup_box .inner .more_btn a{ display: block; font-size: 1.8em; font-weight: 700; color: #fff; line-height: 80px; border-radius: 5px; background: linear-gradient(270deg, #2ACAFF 0%, #2878D2 25%, #2878D2 51%, #2A2C8B 100%); background-position: 1% 50%; background-size: 200% auto;} .pickup_prev, .pickup_next { margin: auto; position: absolute; top: 0; bottom: 0; z-index: 1; width: 46px; height: 46px; /*border-radius: 50%;*/ background-color: rgba(225,225,225,0.6); border: 1px solid #2A2C8B; box-sizing: border-box; cursor: pointer;} .pickup_prev { left: 50px;} .pickup_next { right: 50px;} .pickup_prev:before, .pickup_next:before { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 1px solid #2A2C8B; border-right: 1px solid #2A2C8B; opacity: 1; content: '';} .pickup_prev:before { transform: translate(-25%, -50%) rotate(-135deg);} .pickup_next:before { transform: translate(-75%, -50%) rotate(45deg);} @media screen and (min-width: 768px) { #pickup_box .inner .pickup_list .bukken_box .bukken_text .title{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .railway{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;} #pickup_box .inner .pickup_tab .tab_p{ -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;} #pickup_box .inner .pickup_tab .tab_p:not(.active):hover{ opacity: 0.5;} .pickup_prev, .pickup_next{ -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;} .pickup_prev:hover, .pickup_next:hover{ background-color: rgba(42,44,139,1);} .pickup_prev:hover:before, .pickup_next:hover:before { border-top: 1px solid #fff; border-right: 1px solid #fff;} #pickup_box .inner .pickup_list .bukken_box a:hover{ opacity: 0.7;} #pickup_box .inner .more_btn a:hover{ background-position: 99% 50%;} } @media screen and (max-width: 767px) { #pickup_box{ padding-bottom: 60px;} #pickup_box .inner .pickup_tab{ width: 100%; margin: 0 auto 40px; flex-wrap: wrap; justify-content: center; padding: 0 20px; box-sizing: border-box;} #pickup_box .inner .pickup_tab .tab_p{ width: calc(100%/3); text-align: center; font-size: 1.2em; font-weight: 700; padding: 10px 0; box-sizing: border-box; background-color: #fff; margin-bottom: 2px;} #pickup_box .inner .pickup_tab .tab_p:nth-child(n+2) { border-left: 0;} #pickup_box .inner .pickup_tab .tab_p{ border-right: 2px solid #F0F0F0;} #pickup_box .inner .pickup_tab .tab_p:nth-child(n+4){ width: calc(100%/2);} #pickup_box .inner .pickup_tab .tab_p:first-child{ border-radius: 0;} #pickup_box .inner .pickup_tab .tab_p:last-child{ border-radius: 0;} #pickup_box .inner .title_box{ padding: 0 20px; margin-bottom: 25px;} #pickup_box .inner .title_box .title_text{ font-size: 1.3em;} #pickup_box .inner .title_box span:nth-child(1){ font-size: 2.1em;} #pickup_box .inner .pickup_list .bukken_box{} #pickup_box .inner .pickup_list .bukken_box a{ padding: 15px;} #pickup_box .inner .pickup_list .bukken_box .bukken_pic{ margin-bottom: 15px;} #pickup_box .inner .pickup_list .bukken_box .bukken_text{ position: relative; width: 100%;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .title{ font-size: 1.4em; margin-bottom: 8px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .data{ margin-bottom: 8px;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .data .syubetsu{ font-size: 1.1em; padding: 5px 7px;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .data .price{ font-size: 1.4em;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .data .price > span{ font-size: 0.8em;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .address{ font-size: 1.2em; margin-bottom: 7px;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .railway{ font-size: 1.2em; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .comment{ font-size: 1.2em;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .member{ text-align: center; font-size: 1.3em; margin-top: calc(50% - 60px);} p.new_tag{ border-left: 60px solid #fa1e1e; border-bottom: 60px solid transparent;} p.new_tag > span span{ display: block; position: absolute; top: 13px; left: -55px; font-size: 1.4em; color: #fff; transform:rotate(-45deg); } #pickup_box .inner .more_btn{ text-align: center; width: 160px; height: 50px; margin:0 auto;} #pickup_box .inner .more_btn a{ display: block; font-size: 1.3em; line-height: 50px;} .pickup_prev, .pickup_next{ width: 35px; height: 35px;} .pickup_prev { left: 10px;} .pickup_next { right: 10px;} } .top_base_box .title_box .title_text{ font-size: 2em; position: relative;} .top_base_box .title_text span:nth-child(1){ font-size: 4.5em; margin-right: 15px;} .top_base_box .title_box .title_text:before{ content: ''; display: block; width: 60px; height: 5px; position: absolute; bottom: -30px; left: 0;} .top_base_box .title_box .title_text:after{ content: ''; display: block; width: 60px; height: 5px; position: absolute; bottom: -30px; left: 65px;} @media screen and (max-width: 374px) { #pickup_box .inner .pickup_list .bukken_box .bukken_text .data .syubetsu{ font-size: 0.9em; padding: 3px 3px;} #pickup_box .inner .pickup_list .bukken_box .bukken_text .data .price{ font-size: 1.3em;} #pickup_box .inner .pickup_tab .tab_p{ font-size: 1em;} #pickup_box .inner .title_box .title_text{ font-size: 1.1em;} } /*------------------------- __search -------------------------*/ #search_box{ padding: 0 50px; box-sizing: border-box; margin-bottom: 130px;} #search_box > .inner{ background-image: url(../images/search_back.jpg); background-size: cover; background-position: center; padding: 130px 0; box-sizing: border-box;} #search_box .inner .title_text{ color: #fff; margin-top: -20px;} #search_box .inner .title_text:before{ background-color: #fff;} #search_box .inner .title_text:after{ background-color: #009A47;} #search_box .inner .search_box_inner{ max-width: 1200px; margin: 0 auto;} #search_box .inner .search_top{ display: flex; justify-content: space-between; align-items: flex-start; margin: 0 0 90px; padding: 0 50px; box-sizing: border-box;} #search_box .inner .search_top .member_box{ display: flex; justify-content: flex-end;} #search_box .inner .search_top .member_box table{ width: 220px; border-collapse: collapse; margin-right: 30px;} #search_box .inner .search_top .member_box table tr{ border: 1px solid #fff;} #search_box .inner .search_top .member_box table tr th, #search_box .inner .search_top .member_box table tr td{ padding: 8px; box-sizing: border-box; color: #fff; border-top: 1px solid #fff; font-size: 1.2em;} #search_box .inner .search_top .member_box table tr td{ text-align: right;} #search_box .inner .search_top .member_box table tr td span{ font-size: 1.3em;} #search_box .inner .search_top .member_box .inner{ width: 260px;} #search_box .inner .search_top .member_box .inner .member_join_btn{ text-align: center; width: 100%; height: 65px; margin-bottom: 20px;} #search_box .inner .search_top .member_box .inner .member_join_btn a{ display: block; font-size: 1.8em; font-weight: 700; color: #fff; line-height: 65px; background: linear-gradient(270deg, #B4DE4F 0%, #4BCD6E 25%, #4BCD6E 51%, #008F2A 100%); background-position: 1% 50%; background-size: 200% auto; border-radius: 5px;} #search_box .inner .search_top .member_box .inner .member_login_btn{ text-align: center;} #search_box .inner .search_top .member_box .inner .member_login_btn a{ color: #fff; font-size: 1.3em; text-decoration: underline;} #search_box .inner .search_top #mem_search_login{ text-align: center;} #search_box .inner .search_top #mem_search_login .member_logout_btn{ margin:15px auto 15px;} #search_box .inner .search_top #mem_search_login .member_logout_btn a{ display: inline-block; background-color: #fff; border-radius: 5px; padding: 10px 13px; font-size: 1.2em; color: #2A2C8B; cursor: pointer;} #search_box .inner .search_top #mem_search_login .member_change_btn a{ font-size: 1.2em; color: #fff; cursor: pointer;} #search_box .inner .search_btm{ padding: 0 50px; box-sizing: border-box;} #search_box .inner .search_btm .search_btm_box{ display: flex; justify-content: space-between;} #search_box .inner .search_btm .search_btm_box p.mid_title{ color: #fff; font-size: 1.8em; font-weight: 700; margin-bottom: 25px;} #search_box .inner .search_btm .search_btm_box .search_btm_left{ width: 750px;} #search_box .inner .search_btm .search_btm_box .search_btm_left p.mid_title span{ display: block; padding-left: 40px; width: 100%; position: relative;} #search_box .inner .search_btm .search_btm_box .search_btm_left p.mid_title span:before{ content: ''; display: inline-block; width: 34px; height: 34px; background-size: cover; background-repeat: no-repeat; position: absolute; left: 0; top: -5px; bottom: 0; background-image: url(../images/icon_area@2x.png);} #search_box .inner .search_btm .search_btm_box .search_btm_right{ width: calc(100% - 780px); max-width: 280px;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li{ margin-bottom: 40px;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li .sp_on{display:none;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li p.mid_title{ margin-bottom: 20px;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li p:nth-child(2){ display: flex;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li a{ display: block; text-align: center; font-weight: 700; color: #fff; /*background:linear-gradient(to right,#2F62BE, #5DAFFF);*/background: linear-gradient(270deg, #4FDDFF 0%, #5DAFFF 25%, #5DAFFF 51%, #2F62BE 100%); background-position: 1% 50%; background-size: 200% auto; width: 100%; height: 65px; font-size: 1.6em; line-height: 65px; border-radius: 5px;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li p:nth-child(2) a:nth-child(1){ width: calc(100% - 1px); border-radius: 5px 0 0 5px; margin-right: 5px;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li p:nth-child(2) a:nth-child(2){ width: calc(100% - 1px); border-radius: 0 5px 5px 0;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li p.mid_title span{ display: block; padding-left: 40px; width: 100%; position: relative;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li p.mid_title span:before{ content: ''; display: inline-block; width: 34px; height: 34px; background-size: cover; background-repeat: no-repeat; position: absolute; left: 0; top: -5px; bottom: 0;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li:nth-child(1) p.mid_title span:before{ background-image: url(../images/icon_train@2x.png);} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li:nth-child(2) p.mid_title span:before{ background-image: url(../images/icon_map@2x.png);} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li:nth-child(3) p.mid_title span:before, #search_box .inner .search_btm .search_btm_box .search_btm_right ul.search_btm_right_bottom li:nth-child(1) p.mid_title span:before{ background-image: url(../images/icon_school@2x.png)!important;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li:nth-child(4) p.mid_title span:before, #search_box .inner .search_btm .search_btm_box .search_btm_right ul.search_btm_right_bottom li:nth-child(2) p.mid_title span:before{ background-image: url(../images/icon_keyword@2x.png)!important;} /*タブ設定*/ .search_tab { display: flex; cursor: pointer;} .tab_s{ width: calc(100%/2); text-align: center; font-size: 18px; color: #3264BE; background-color: #fff; padding: 15px 0; box-sizing: border-box; border-bottom: 3px solid #1E3C71; font-weight: 700;} .tab_s.active { background-color: #3264BE; color: #fff; border-bottom: 3px solid #3264BE;} .tab_s:first-child{ border-radius: 10px 0 0 0;} .tab_s:last-child{ border-radius: 0 10px 0 0;} .tab_s:first-child.active{ border-right: 3px solid #1E3C71;} .tab_s:last-child.active{ border-left: 3px solid #1E3C71;} .panel_s { display: none; text-align: center; background-color: #DCE8F4;} .panel_s.active { display: block;} #movie_box{ margin: 0 auto 130px; width: 1100px; position: relative;} /*#movie_box:after{ content: ""; display: block; position: absolute; top: 400px; left: 0; margin: 0 calc(50% - 80vw); width: 100vw; height: 700px; background-color: #E1E1E1; z-index: 0;}*/ #movie_box .inner{ display: block; width: 100%; height: 100%; background-color: #fff; position: relative; z-index: 1;} .youtube_movie{ position:relative; width:100%; padding-top:56.25%;} .player { position: absolute; top: 0; left: 0; z-index: 1;} .thumb{ position:absolute; top:0; left:0; z-index:1;} .youtube_movie iframe{ position:absolute; top: 0; left: 0; width:100%; height:100%;} .youtube_movie img{ width: 100%; height: auto;} @media screen and (min-width: 768px) { #search_box .inner .search_top .member_box .inner .member_join_btn a:hover{ background-position: 99% 50%;} #search_box .inner .search_top .member_box .inner .member_login_btn a:hover{ opacity: 0.6;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li a:hover{ background-position: 99% 50%;} .youtube_movie img{ -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;} .youtube_movie:hover img{ opacity: 0.6; cursor: pointer;} #search_box .inner .search_top #mem_search_login .member_logout_btn a:hover, #search_box .inner .search_top #mem_search_login .member_change_btn a:hover{ opacity: 0.6;} } .search_panel_sp{display: none;} .svg_map .clippath{fill:none;stroke-width:0px;} .svg_map .line{fill:none;stroke:#feffff;stroke-width:1px;} .svg_map .box{cursor:pointer;} .svg_map .box .ground01{fill:#2A2C8B;fill-opacity:0;stroke:#feffff;transition:fill-opacity 0.3s;} .svg_map .box:hover .ground01{fill-opacity:1;} .svg_map .box .town01, .svg_map .box .town02{/*font-family:'Noto Sans JP',YuGo-Bold-83pv-RKSJ-H,YuGothic;*/font-weight:700;} .svg_map .box .town01{stroke:#2f62be;stroke-width:5px;stroke-linecap:round;stroke-linejoin:round;} .svg_map .box .town02{fill:#FFF;} .svg_map .box .tb{glyph-orientation-vertical:0deg;text-orientation:upright;writing-mode:tb;} .svg_map #tokyo_background{clip-path:url(#tokyo_clippath);fill:#dce8f4;} .svg_map #tokyo_background .area{fill:url(#back_gradation_tokyo);stroke-width:0px;} .svg_map #tokyo_background .b01{fill:#b4e1fa;stroke:#FFF;stroke-width:4px;} .svg_map #tokyo_background .b02{fill:#dce8f4;stroke:#FFF;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;} .svg_map #tokyo_background .b03{fill:none;stroke:#FFF;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;} .svg_map #tokyo_background .b04{fill:none;stroke:#fff;stroke-width:4px;} .svg_map #tokyo_town{clip-path:url(#clippath);} .svg_map #tokyo_town .box .town01, .svg_map #tokyo_town .box .town02{font-size:13px;} .svg_map #saitama_background{clip-path: url(#saitama_clippath);fill:#dce8f4;} .svg_map #saitama_background .area1{fill:url(#back_gradation_saitama1);stroke-width:0px;} .svg_map #saitama_background .area2{fill:url(#back_gradation_saitama2);stroke-width:0px;} .svg_map #saitama_background .b01{fill:none;stroke:#FFF;stroke-width:3.17px;stroke-linecap:round;stroke-linejoin:round;} .svg_map #saitama_background .st5{fill:none;} .svg_map #saitama_town{clip-path:url(#clippath);} .svg_map #saitama_town .box .town01, .svg_map #saitama_town .box .town02{font-size: 11.88px;} @media screen and (max-width: 767px){ .search_tab, .search_panel{display: none;} .search_panel_sp{display: block;} .search_panel_sp .area_wrap:not(:last-child){margin-bottom: 10px;} .search_panel_sp .area, .search_panel_sp .btn_lst_wrap li > span{cursor: pointer} .search_panel_sp .area{width: 100%;height: 50px;font-size: 1.3em;line-height: 50px;border-radius: 5px;text-align: center;font-weight: 700;color: #fff;background: linear-gradient(to right,#2F62BE, #5DAFFF);position: relative;} .search_panel_sp .area::before, .search_panel_sp .area::after{content: "";width: 1em;height: 2px;background-color: #DCE8F4;transform: translateY(-50%);position: absolute;top: 50%;right: 18px;transition: all .3s;} .search_panel_sp .area::after{transform: translateY(-50%) rotate(90deg);} .search_panel_sp .area.active{border-radius: 5px 5px 0 0;} .search_panel_sp .area.active::after{opacity: 0;transform: translateY(-50%) rotate(0);} .search_panel_sp .btn_lst_wrap{background-color: #fff;padding: 5px;border-radius: 0 0 5px 5px;display: none;} .search_panel_sp .btn_lst_wrap ul{display: block;flex-wrap:wrap;} .search_panel_sp .btn_lst_wrap li{width: 100%;padding: 5px;box-sizing: border-box;} .search_panel_sp .btn_lst_wrap li > span{font-size: 1.3em;font-weight: 700;color: #2A2C8B;text-align: center;padding: 1em;background-color: #DCE8F4;border-radius: 5px;box-sizing: border-box;display: block;} .search_panel_sp .btn_lst_wrap li > span > span{ font-size: 0.8em; color: #9192C3;} } @media screen and (max-width: 767px) { .top_base_box .title_box .title_text{ font-size: 1.2em; padding: 0; margin-bottom: 35px;} .top_base_box .title_text span:nth-child(1){ font-size: 3em; margin-right: 10px;} .top_base_box .title_box .title_text:before{ content: ''; display: block; width: 40px; height: 3px; position: absolute; bottom: -10px; left: 0;} .top_base_box .title_box .title_text:after{ content: ''; display: block; width: 40px; height: 3px; position: absolute; bottom: -10px; left: 45px;} #search_box{ padding: 0; margin-bottom: 50px;} #search_box > .inner{ padding: 40px 0 30px;} #search_box .inner .title_text{ margin: 0 0 30px; padding: 0 20px; box-sizing: border-box;} #search_box .inner .title_text:before{ left: 20px;} #search_box .inner .title_text:after{ left: 65px;} #search_box .inner .search_top{ display: block; margin-bottom: 30px; padding: 0;} #search_box .inner .search_top .member_box{ padding: 0 20px; box-sizing: border-box;} #search_box .inner .search_top .member_box table{ width: 50%; margin-right: 0; margin-bottom:0;} #search_box .inner .search_top .member_box table tr th, #search_box .inner .search_top .member_box table tr td{ padding: 6px; font-size: 1em;} #search_box .inner .search_top .member_box .inner{ width: calc(50% - 15px); margin-left: 15px;} #search_box .inner .search_top .member_box .inner .member_join_btn{ text-align: center; width: 100%; height: 50px; margin:0 auto 15px;} #search_box .inner .search_top .member_box .inner .member_join_btn a{ font-size: 1.5em; line-height: 50px; border-radius: 5px;} #search_box .inner .search_top #mem_search_login .member_logout_btn{ margin:5px auto 15px;} #search_box .inner .search_top #mem_search_login .member_logout_btn a, #search_box .inner .search_top #mem_search_login .member_change_btn a{ font-size: 1.2em; text-decoration: none;} #search_box .inner .search_btm{ padding: 0;} #search_box .inner .search_btm .search_btm_box{ display: block; padding: 0 20px; box-sizing: border-box; overflow-x: hidden;} #search_box .inner .search_btm .search_btm_box p.mid_title{ font-size: 1.4em; padding-top: 10px;} #search_box .inner .search_btm .search_btm_box .search_btm_left{ margin-bottom: 30px;} #search_box .inner .search_btm .search_btm_box .search_btm_right{ width: 100%; max-width: 100%;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul.search_btm_right_bottom{ display: flex; flex-wrap: wrap;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul.search_btm_right_bottom li{ width: calc(50% - 5px); margin-bottom: 20px;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul.search_btm_right_bottom li:nth-child(odd){ margin-right: 10px;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li .sp_on{display:inline;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li .sp_off{display:none;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li p.mid_title{ margin-bottom: 10px;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li p.mid_title span{ padding-left: 30px;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li p.mid_title span:before{ width: 25px; height: 25px;} #search_box .inner .search_btm .search_btm_box .search_btm_left{ width: 100%;} #search_box .inner .search_btm .search_btm_box .search_btm_right{ width: 100%;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li a{ height: 50px; font-size: 1.3em; line-height: 50px; border-radius: 5px;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li p:nth-child(2) a:nth-child(1){ border-radius: 5px!important; border-right: 0;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li p:nth-child(2) a:nth-child(2){ border-radius: 5px!important;} #search_box .inner .search_btm .search_btm_box .search_btm_left p.mid_title span:before{ background-size: 34px 34px;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li{ margin-bottom: 30px;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li p:nth-child(2){ display: block;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li .sp_on p:nth-child(2){ margin-bottom: 10px;} #search_box .inner .search_btm .search_btm_box .search_btm_right ul li .sp_on p:nth-child(3){ margin-bottom: 10px;} .tab_s{ font-size: 1.2em; padding: 10px 0;} #movie_box{ margin: 0 auto 50px; padding: 0 20px; box-sizing: border-box; width: 100%;} #movie_box .inner a img{ width: 100%; height: auto;} } @media screen and (max-width: 374px) { .top_base_box .title_text span:nth-child(1){ font-size: 2.7em;} #search_box .inner .search_top .member_box table tr th, #search_box .inner .search_top .member_box table tr td{ padding: 2px; font-size: 0.9em;} #search_box .inner .search_btm .search_btm_box p.mid_title{ font-size: 1.2em;} } /*------------------------- __staff -------------------------*/ #staff_box{ margin: 0 auto 130px; padding-top: 130px; box-sizing: border-box; overflow-x: hidden; position: relative;} #staff_box::before{ content: ""; display: block; position: absolute; top: -130px; left: 0; margin: 0 calc(50% - 20vw); width: 100vw; height: 700px; background-color: #E1E1E1; z-index: 0;} #staff_box .inner{ width: min(100%, 1120px); margin: 0 auto; padding: 0 20px; position: initial; z-index: 1!important;} #staff_box .inner .title_box{ margin: 0 auto 110px; width: 1100px;} #staff_box .inner .title_text:before{ background-color: #2A2C8B;} #staff_box .inner .title_text:after{ background-color: #009A47;} #staff_box .inner .staff_list { position: initial; width: calc(100% + (100vw - 100%) / 2);} #staff_box .inner .staff_list ul{ display: flex; position: initial;} #staff_box .inner .staff_list ul li{ margin-right: 70px; width: 290px;} #staff_box .inner .staff_list ul li .staff_photo{ width: 290px; height: 290px; overflow: hidden; margin-bottom: 15px;} #staff_box .inner .staff_list ul li .staff_photo a{ display: block; width: 100%; height: 100%;} #staff_box .inner .staff_list ul li .staff_photo a img{ width: 290px; height: 290px; object-fit: cover; filter: grayscale(100%); transition: .3s ease-in-out;} #staff_box .inner .staff_list ul li .staff_text p:nth-child(1){ font-size: 1.8em; line-height: 1.3; font-weight: 700; margin-bottom: 15px;} #staff_box .inner .staff_list ul li .staff_text p:nth-child(2){ text-align: right; font-size: 1.4em;} #voice_box .more_btn, #staff_box .more_btn{ position: absolute; top: 170px; right: 50px; text-align: center; width: 200px; height: 70px; margin:0 auto; z-index: 100;} #voice_box .more_btn a, #staff_box .more_btn a{ display: block; font-size: 1.6em; font-weight: 700; color: #fff; line-height: 70px; border-radius: 5px; background: linear-gradient(270deg, #2ACAFF 0%, #2878D2 25%, #2878D2 51%, #2A2C8B 100%); background-position: 1% 50%; background-size: 200% auto;} .staff_prev, .staff_next { margin: auto; position: absolute; top: 0; bottom: -250px; z-index: 1; width: 46px; height: 46px; background-color: rgba(225,225,225,0.6); border: 1px solid #2A2C8B; cursor: pointer;} .staff_prev { left: 50px;} .staff_next { right: 50px;} .staff_prev:before, .staff_next:before { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 1px solid #2A2C8B; border-right: 1px solid #2A2C8B; opacity: 1; content: '';} .staff_prev:before { transform: translate(-25%, -50%) rotate(-135deg);} .staff_next:before { transform: translate(-75%, -50%) rotate(45deg);} @media screen and (min-width: 768px) { .staff_prev, .staff_next{ -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;} .staff_prev:hover, .staff_next:hover{ background-color: rgba(42,44,139,1);} .staff_prev:hover:before, .staff_next:hover:before { border-top: 1px solid #fff; border-right: 1px solid #fff;} #staff_box .inner .staff_list ul li .staff_photo a:hover img{ filter:grayscale(0);} #staff_box .more_btn a:hover{ background-position: 99% 50%;} } @media screen and (max-width: 767px) { #staff_box .staff_list_wrap{ position: relative;} #staff_box .inner{ padding: 0;} #staff_box .inner .title_box{ margin: 0 auto; width: 100%; padding: 0 20px; box-sizing: border-box;} #staff_box .inner .staff_list ul li{ margin-right: 20px; width: 160px;} #staff_box .inner .staff_list ul li .staff_photo{ width: 160px; height: 160px; margin-bottom: 10px;} #staff_box .inner .staff_list ul li .staff_photo a img{ width: 160px; height: 160px;} #staff_box .inner .staff_list ul li .staff_text p:nth-child(1){ font-size: 1.4em; margin-bottom: 5px; font-weight: normal;} #staff_box .inner .staff_list ul li .staff_text p:nth-child(2){ font-size: 1.2em;} .staff_prev, .staff_next{ width: 35px; height: 35px; bottom: -20px;} .staff_prev { left: 10px;} .staff_next { right: 10px;} } /*------------------------- __voice -------------------------*/ #voice_box{ margin: 0 auto 130px; padding-top: 130px; box-sizing: border-box; overflow-x: hidden; position: relative;} #voice_box::before{ content: ""; display: block; position: absolute; top: -130px; right: 0; margin: 0 calc(50% - 20vw); width: 100vw; height: 700px; background-color: #E1E1E1; z-index: 0;} #voice_box .inner{ position: initial;} #voice_box { margin: 0 auto 130px; overflow-x: hidden;} #voice_box .voice_list_wrap{position: relative;} #voice_box .inner { width: min(100%, 1120px); margin: 0 auto; padding: 0 20px;} #voice_box .inner .title_box{ margin: 0 auto 110px; width: 1100px;} #voice_box .inner .title_text:before{ background-color: #2A2C8B;} #voice_box .inner .title_text:after{ background-color: #009A47;} #voice_box .inner .voice_list { width: calc(100% + (100vw - 100%) / 2);} #voice_box .inner .voice_list ul{ display: flex; position: initial;} #voice_box .inner .voice_list ul li{ margin-right: 70px; width: 290px;} #voice_box .inner .voice_list ul li .voice_photo{ width: 290px; height: 290px; overflow: hidden; margin-bottom: 15px;} #voice_box .inner .voice_list ul li .voice_photo a{ display: block; width: 100%; height: 100%;} #voice_box .inner .voice_list ul li .voice_photo a img{ width: 290px; height: 290px; object-fit: cover; filter: grayscale(100%); transition: .3s ease-in-out;} #voice_box .inner .voice_list ul li .voice_text p:nth-child(1){ font-size: 1.8em; line-height: 1.3; font-weight: 700; margin-bottom: 15px;} #voice_box .inner .voice_list ul li .voice_text p:nth-child(2){ text-align: right; font-size: 1.4em;} .voice_prev, .voice_next { margin: auto; position: absolute; top: 0; bottom: -110px; z-index: 1; width: 46px; height: 46px; background-color: rgba(225,225,225,0.6); border: 1px solid #2A2C8B; cursor: pointer;} .voice_prev { left: 50px;} .voice_next { right: 50px;} .voice_prev:before, .voice_next:before { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 1px solid #2A2C8B; border-right: 1px solid #2A2C8B; opacity: 1; content: '';} .voice_prev:before { transform: translate(-25%, -50%) rotate(-135deg);} .voice_next:before { transform: translate(-75%, -50%) rotate(45deg);} @media screen and (min-width: 768px) { #voice_box .inner .voice_list ul li .voice_photo a:hover img{ filter:grayscale(0);} .voice_prev, .voice_next{ -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;} .voice_prev:hover, .voice_next:hover{ background-color: rgba(42,44,139,1);} .voice_prev:hover:before, .voice_next:hover:before { border-top: 1px solid #fff; border-right: 1px solid #fff;} } @media screen and (max-width: 767px) { #voice_box .inner{ padding: 0;} #voice_box .inner .title_box{ margin: 0 auto; width: 100%; padding: 0 20px; box-sizing: border-box;} #voice_box .inner .voice_list ul li{ margin-right: 20px; width: 160px;} #voice_box .inner .voice_list ul li .voice_photo{ width: 160px; height: 160px; margin-bottom: 10px;} #voice_box .inner .voice_list ul li .voice_photo a img{ width: 160px; height: 160px;} #voice_box .inner .voice_list ul li .voice_text p:nth-child(1){ font-size: 1.3em; margin-bottom: 5px; font-weight: normal;} #voice_box .inner .voice_list ul li .voice_text p:nth-child(2){ font-size: 1.2em;} .voice_prev, .voice_next{ width: 35px; height: 35px; bottom: 0;} .voice_prev { left: 10px;} .voice_next { right: 10px;} #staff_box{ margin: 0 auto 40px; padding-top: 0;} #voice_box{ margin: 0 auto 40px; padding-top: 0;} #staff_box:before{ display: none;} #voice_box:before{ display: none;} } /*------------------------- __contents -------------------------*/ #contents_box{ margin-bottom: 130px;} #contents_box .inner{ padding: 0 50px; box-sizing: border-box;} #contents_box .inner ul{ display: flex; flex-wrap: wrap;} #contents_box .inner ul li{ display: block; width: 33.33333%;} #contents_box .inner ul li a{ display: block; cursor: pointer; overflow: hidden; position: relative; width: 100%; padding-top: 100%;} #contents_box .inner ul li span{ display: block; overflow: hidden; position: relative; width: 100%; padding-top: 100%;} #contents_box .inner ul li a > img, #contents_box .inner ul li span > img{ width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;} #contents_box .inner ul li a p, #contents_box .inner ul li span p{ font-size: 2.5em; line-height: 1.5em; text-align: center; font-weight: 700; align-items: center; color: #fff; /*display: flex; justify-content: center;*/ margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); width: 80%; z-index: 2;} #contents_box .inner ul li a p span, #contents_box .inner ul li a span span{ display: block;} #contents_box .inner ul li a::before{ background: linear-gradient(-20deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 100%); bottom: 0; content: ''; height: auto; left: 0; opacity: 1; position: absolute; right: 0; top: 0; transition: opacity .6s ease; width: 100%; z-index: 1;} #contents_box .inner ul li span::before{ background: linear-gradient(-20deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 100%); bottom: 0; content: ''; height: auto; left: 0; opacity: 1; position: absolute; right: 0; top: 0; transition: opacity .6s ease; width: 100%; z-index: 1;} @media screen and (min-width: 768px) { #contents_box .inner ul li a > img{ transition: transform .6s ease;} #contents_box .inner ul li a:hover > img { transform: scale(1.1);} } @media screen and (max-width: 767px) { #contents_box{ margin-bottom: 40px;} #contents_box .inner{ padding: 0;} #contents_box .inner ul li{ width: 50%;} #contents_box .inner ul li a p, #contents_box .inner ul li span p{ font-size: 1.6em; line-height: 1.4em;} } @media screen and (max-width: 374px) { #contents_box .inner ul li a p, #contents_box .inner ul li span p{ font-size: 1.5em;} } /*------------------------- __shop -------------------------*/ #shop_box{ width: 1200px; margin: 0 auto; position: relative;} #shop_box:after{ content: ""; display: block; position: absolute; top: -130px; left: 0; margin: 0 calc(50% - 20vw); width: 100vw; height: 700px; background-color: #E1E1E1; z-index: 0;} #shop_box .title_text, #shop_box #shop_map{ position: relative; z-index: 1;} #shop_box .inner{ padding: 0 50px; box-sizing: border-box; position: relative;} #shop_box .inner .title_box{ margin: 0 auto 110px;} #shop_box .inner .title_text:before{ background-color: #2A2C8B;} #shop_box .inner .title_text:after{ background-color: #009A47;} #shop_box .inner .company_bottom{ width: 100%; margin: 0 auto; padding: 0 auto;} #shop_box .inner .company_bottom ul{ display: flex;} #shop_box .inner .company_bottom ul li{ width: calc(50% - 40px);} #shop_box .inner .company_bottom ul li:nth-child(1){ margin-right: 80px;} #shop_box .inner .company_bottom ul li a{ display: block; font-size: 2em; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 40px 30px; position: relative;} #shop_box .inner .company_bottom ul li a p{ position: absolute; top: 50%; right: 30px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); width: 46px; height: 46px;} #shop_box .inner .company_bottom ul li a p span{ /*position: relative;*/ display: inline-block; color: #000; vertical-align: middle; text-decoration: none; font-size: 15px;} #shop_box .inner .company_bottom ul li a p span::before, #shop_box .inner .company_bottom ul li a p span::after{ position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle;} #shop_box .inner .company_bottom ul li a p span::before{ width: 46px; height: 46px; background: #dcdcdc;} #shop_box .inner .company_bottom ul li a p span::after{ left: 15px; width: 10px; height: 10px; border-top: 1px solid #000; border-right: 1px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg);} #shop_box .inner .more_btn{ position: absolute; top: 50px; right: 50px; text-align: center; width: 200px; height: 70px; margin:0 auto; z-index: 100;} #shop_box .inner .more_btn a{ display: block; font-size: 1.6em; font-weight: 700; color: #fff; line-height: 70px; border-radius: 5px; background: linear-gradient(270deg, #2ACAFF 0%, #2878D2 25%, #2878D2 51%, #2A2C8B 100%); background-position: 1% 50%; background-size: 200% auto;} @media screen and (min-width: 768px) { #shop_box .inner #shop_map_sp, #shop_box .inner .shop_list{ display: none;} #shop_box .inner .more_btn a:hover{background-position: 99% 50%;} #shop_box .inner #shop_map ul li img{ -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;} #shop_box .inner #shop_map ul li:hover img{ opacity: 0.7;} #shop_box .inner .company_bottom ul li a{ -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;} #shop_box .inner .company_bottom ul li a:hover{ background-color: #fff;} } @media screen and (max-width: 767px) { #shop_box{ width: 100%;} #shop_box .inner{ padding: 0 20px;} #shop_box .inner .title_box{ margin: 0 auto;} #shop_box .inner .company_bottom ul li{ width: 50%;} #shop_box .inner .company_bottom ul li:nth-child(1){ margin-right: 20px;} #shop_box .inner .company_bottom ul li a{ display: block; font-size: 1.4em; padding: 20px 10px;} #shop_box .inner .company_bottom ul li:nth-child(1) a{ border-bottom: 1px solid #000;} #shop_box .inner .company_bottom ul li a p{ position: absolute; top: 50%; right: 0; width: 26px; height: 26px;} #shop_box .inner .company_bottom ul li a p span{ /*position: relative;*/ display: inline-block; color: #000; vertical-align: middle; text-decoration: none; font-size: 1.4em;} #shop_box .inner .company_bottom ul li a p span::before{ width: 26px; height: 26px; background: #dcdcdc;} #shop_box .inner .company_bottom ul li a p span::after{ left: 5px; width: 8px; height: 8px; border-top: 1px solid #000; border-right: 1px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg);} /*#shop_box .inner .shop_list{ margin-bottom: 20px;} #shop_box .inner .shop_list ul{ display: flex; flex-wrap: wrap; text-align: center;} #shop_box .inner .shop_list ul li{ width: calc(50% - 10px); margin-right: 20px; margin-bottom: 10px;} #shop_box .inner .shop_list ul li:nth-child(2n){ margin-right: 0;} #shop_box .inner .shop_list ul li a{ display: block;font-size: 1.4em; padding: 15px 0; box-sizing: border-box; background-color: #2A2C8B; color: #fff; border-radius: 5px;}*/ #shop_box .inner .more_btn{ text-align: center; width: 120px; height: 36px; margin: 0 auto 0; top: 0; right: 20px;} #shop_box .inner .more_btn a{ display: block; font-size: 1.2em; line-height: 36px; font-weight: normal;} } @media screen and (max-width: 374px) { #shop_box .inner .more_btn{ width: 85px; height: 30px; top: 10px;} #shop_box .inner .more_btn a{ font-size: 1em; line-height: 30px;} } /*------------------------- __contact -------------------------*/ #contact_box{ background: linear-gradient( #F0F0F0 0%, #F0F0F0 50%, #fff 50%, #fff 100%); padding: 130px 0 130px;} #contact_box .inner{ max-width: 1200px; height: 340px; padding: 0 50px; box-sizing: border-box; margin: 0 auto;} #contact_box .inner a{ display: block; width: 100%; height: 100%; /*background: linear-gradient(-90deg, #2878d2 0%, #2a2c8b 100%);*/background: linear-gradient(270deg, #2ACAFF 0%, #2878D2 25%, #2878D2 51%, #2A2C8B 100%); background-position: 1% 50%; background-size: 200% auto; position: relative; border-radius: 20px;} #contact_box .inner a .title_box{ position: absolute; top: 50%; left: 90px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); margin-top: -25px;} #contact_box .inner a .title_box .title_text{ color: #fff; font-size: 1.5em;} #contact_box .inner a .title_box .title_text span:nth-child(2){ font-size: 1.2em;} #contact_box .inner a .title_box .title_text:before{ background-color: #fff;} #contact_box .inner a .title_box .title_text:after{ background-color: #009A47;} #contact_box .inner a .arrow{ position: absolute; top: 50%; right: 90px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); width: 70px; height: 70px;} #contact_box .inner a .arrow span{ display: inline-block; color: #000; vertical-align: middle; text-decoration: none; font-size: 15px;} #contact_box .inner a .arrow span::before, #contact_box .inner a .arrow span::after{ position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle;} #contact_box .inner a .arrow span::before{ width: 70px; height: 70px; border: 1px solid #fff;} #contact_box .inner a .arrow span::after{ left: 23px; width: 15px; height: 15px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg);} @media screen and (min-width: 768px) { #contact_box .inner a:hover{ background-position: 99% 50%;} } @media screen and (max-width: 767px) { #contact_box{ padding: 50px 0;} #contact_box .inner{ height: 140px; padding: 0 20px;} #contact_box .inner a{ border-radius: 15px;} #contact_box .inner a .title_box{ position: absolute; top: 50%; left: 30px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); margin-top: 10px;} #contact_box .inner a .title_box .title_text{ color: #fff; font-size: 1em;} #contact_box .inner a .title_box .title_text span:nth-child(2){ font-size: 1.2em;} #contact_box .inner a .arrow{ position: absolute; top: 50%; right: 30px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); width: 30px; height: 30px;} #contact_box .inner a .arrow span::before{ width: 30px; height: 30px;} #contact_box .inner a .arrow span::after{ left: 10px; width: 8px; height: 8px;} } @media screen and (max-width: 767px) { #movie_box:after, #shop_box:after{ display: none!important;} }