@charset "utf-8";
/* CSS Document */
@media screen and (max-width:500px) {
.sp-none02 {display: none;}
.indent_content {padding: 30px 16px;}
.page_thumb {display: none;}
.content {padding: 16px;}
.page_title p {font-size: 5vw; padding-bottom: 10px;}
.indent_content02 {margin-top: 30px;}

/*header*/
    #nav {background: url("img/sp/header/nav_bg.jpg")top left repeat; background-size: 35%;}
    #nav .sp-box {display: block; padding: 0 16px; width: 100%;}
    #nav .sp-box .sp-logo {width: 25%; margin: auto auto 30px;}
    #nav .sp-box .txt {font-weight: 900; font-size: 8vw; text-align: center; letter-spacing: 1vw;}
    #nav .sp-box .txt span {background: -webkit-linear-gradient(180deg,#ea6666 0%, #f66c6c 25%, #38b151 50%, #599cda 75%, #23addd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-table;}
    #nav .sp-box a {font-size: 4vw; line-height: 1; box-sizing: border-box; border-left: 2px solid #23addd; padding-left: 20px; margin-top: 20px;}
    #nav .inner02 {display: none;}
    header {position: fixed!important; background: #fff; height: 60px; padding: 0 16px; opacity: 1; transform: translateY(0);}
    #header02 {display: none;}
    header nav {display: none!important;}   
    header h2 {width: 50%;}
    header h2 img {width: 20%;}
    header h2 p {font-size: 3.5vw;}
    .hamburger04_box {right: 16px;}
    #hamburger04 {width: 25px; height: 20px;}
    .inner_line {width: 100%;}
    #line04_2 {top: 9px;}
    .hamburger03_box {height: 60px; right: 16px; display: flex; align-items: center; justify-content: flex-end;}
    #hamburger03 {top: 0; bottom: 0; width: 25px; height: 20px; margin-right: 0; margin: auto;}
    #line03_1.line_1, #line04_1.line_1, #line05_1.line_1 {width: 100%; transform: translateY(10px) rotate(-45deg);}
    #line03_2.line_2, #line04_2.line_2, #line05_2.line_2 {width: 100%; top: 9px;}
    #line03_3.line_3, #line04_3.line_3, #line05_3.line_3 {width: 100%; transform: translateY(-8.5px) rotate(45deg);}
    .front_main_box {align-items: flex-start; padding: 0 16px;}
    .front_main_box .txt01 {font-size: 7vw;}
    .front_main_box .box {height: 100%; display: flex; align-items: center; justify-content: center;}
    .front_main_box .inner {position: relative;}
    .front_main_box .txt:nth-child(n + 2) {margin-top: 10%;}
    .front_main_box .txt02 {font-size: 10vw; top: inherit; right: 0; left: 0; margin: auto; bottom: 0; position: relative; margin-top: 10%;}
    .front_main_box .txt02 p:nth-child(1) {top: 0; position: relative; text-align: right;}
    .front_main_box .txt02 p:nth-child(2) {margin: 5% 0;}
    .front_main_box .txt02 p:nth-child(3) {top: 0; left: 0; position: relative; text-align: right;}
    .front_main_box .movie {height: 60%; object-fit: cover;}
    .front_main_box .icon_text_box {top: inherit; width: 100%; height: 100%;}
    .front_main_box .icon_text01 {display: none;}
    .front_main_box .icon_text02 {font-size: 13vw; right: 0; letter-spacing: 1vw; margin: auto; text-align: center; bottom: 1%;}
    .front_main_box .icon_text03 {font-size: 7vw; right: 0; left: 0; letter-spacing: 1vw; text-align: center; margin: auto; bottom: 0;}
    .opening_box .opening_logo {width: 25%;}
    #nav .inner,#nav .over {display: none;}

    
	.pan {margin-top: 60px; padding: 30px 16px; font-size: 3vw;}
    .pan a {font-size: 3vw;}
	.page_title {font-size: 5vw; padding: 0 0 5px; margin-bottom: 30px; border-bottom: 2px solid #000;}
    .single_page {padding-bottom: 30px;}

/*index*/
    #index .box01 {padding-bottom: 30px;}
    #index .box01 .title {margin: 0; padding: 30px 16px;}
    #index .box01 h2 span {font-size: 6vw; box-sizing: border-box; display: block; padding-right: 0;}
    #index .box01 .min {font-size: 4vw; margin-top: 16px; margin-left: 0; text-align: right;}
    #index .box01 .icon_box {display: none;}
    #index .box01 .inner {display: block; padding: 0 16px;}
    #index .box01 .item {width: 100%; padding-left: 0; margin-right: 0; border-left: none; border-bottom: 2px solid #ff5323; padding-bottom: 16px;}
    #index .box01 .item:nth-child(n + 2) {margin-top: 20px;}
    #index .box01 .img {width: 100%;}
    #index .box01 .btn {left: auto; right: 16px; bottom: 20px; font-size: 3.5vw; padding: 0 30px 0 10px;}
    #index .box01 .time {font-size: 4vw;}
    #index .box01 h3 {font-size: 4vw;}
    #index .box01 .text {font-size: 3.5vw;}
    #index .box02 {padding: 0 0 30px; background-size: 30%;}
    #index .wave_box,#index .box02 .wave_box,#index .box04 .wave_box,#index .box10 .wave_box {left: 0; top: 0; width: 100%; margin-left: inherit; position: relative;}
    #index .box02 .title_box {width: calc(100% - 32px); left: 0; margin-left: auto; margin-right: auto; height: auto; top: 0; padding: 20px 0; position: relative; justify-content: center; box-sizing: border-box; transform: translateX(10px) skewX(-10deg); margin-top: -10%; box-shadow: -5px 5px rgb(52 102 148 / 30%);}
    #index .box02.inview .title_box {transform: translateX(0) skewX(-10deg);}
    #index .box02 h2 {font-size: 4vw; text-align: center; line-height: 1.5; transform: skewX(10deg);}
    #index .box02 h2 .big {font-size: 6vw;}
    #index .box02 .inner {margin-top: 30px; display: block; padding: 0 16px;}
    #index .box02 .inner .img {margin: 0 auto 20px;}
    #index .box02 .text_box {width: 100%;}
    #index .box02 .triangle01,#index .box02 .triangle02 {display: none;}
    #index .box02 h3 {font-size: 4vw; line-height: 1.8; margin-bottom: 10px;}
    #index .box02 .text {font-size: 3.5vw; line-height: 2;}
    #index .box02 .btn_box {position: relative; right: inherit; bottom: inherit; width: 100%; display: block; margin: 20px auto 0;}
    #index .box02 .btn {width: 100%; height: auto; font-size: 4vw; border-radius: 20px; padding: 13px 0; background: -webkit-linear-gradient(180deg,#3885cd 0%, #459aea 50%, #2e6ca6 100%); border: none;}
    #index .box02 .btn::before,#index .box03 .btn::before {display: none;}
    #index .box02 .btn02 {margin: 20px auto 0;}
    #index .box03 .btn {background: -webkit-linear-gradient(180deg,#38b151 0%, #39d659 50%, #259e3e 100%); border: none;}
    #index .box02 .btn:hover span,#index .box03 .btn:hover span {color: #fff;}
    #index .box04 {padding: 30px 0;}
    #index .box04 .title_box {width: calc(100% - 32px); height: auto; font-size: 4vw; margin: 0 auto 30px; transform: translateX(10px) skewX(-10deg); box-shadow: 5px 5px rgba(252,83,36,.3); margin-top: -10%;}
    #index .box04.inview .title_box {transform: translateX(0) skewX(-10deg);}
    #index .box04 .title_box h2 {transform: skewX(10deg); padding: 16px 0;}
    #index .box04 h2 span {font-size: 6vw;}
    #index .box04 .inner {display: block;}
    #index .box04 .inner .box {width: 100%;}
    #index .box04 .box .over {border: 3px solid #ff5323;}
    #index .box04 .txt01 {font-size: 4vw; padding: 0 10px 10px; margin-bottom: 10px;}
    #index .box04 .txt02 {font-size: 4.5vw;}
    #index .box04 .item .img {display: none;}
    #index .box04 .btn {width: calc(100% - 32px); height: auto; border-radius: 20px; font-size: 4vw; padding: 13px 0; background: -webkit-linear-gradient(180deg,#ff5323 0%, #ff7b56 50%, #d64d27 100%); border: none;}
    #index .box04 .btn::before {display: none;}
    #index .box04 .btn:hover span {color: #fff;}
    #index .box04 .on_img {display: none;}
    #index .box04 .inner .box:nth-child(n + 2) {margin-top: 30px;}
    #index .box04 .inner .box:nth-child(2),#index .box04 .inner .box:nth-child(n + 4) {margin: 30px auto 0;}
    #index .c_img {min-width: auto; left: 0; margin-left: 0; margin-top: 0;}
    #index .box05 {padding: 30px 16px;}
    #index .box05 .title_box {width: 100%; right: 0; position: relative; margin: 0 auto; height: auto; top: inherit; margin-top: -17%; transform: skewX(10deg); box-shadow: -5px 5px rgba(52, 102, 148, .3); justify-content: center; padding: 16px 0;}
    #index .box05 h2 {font-size: 5vw; transform: skewX(-10deg); padding-right: 0;}
    #index .box05.inview .title_box {transform: translateX(0) skewX(10deg);}
    #index .box05 .triangle01,#index .box05 .triangle02 {display: none;}
    #index .box05 h3 p {font-size: 4.5vw; background: none; margin-top: 30px; padding: 0;}
    #index .box05 h3 p:nth-child(2) {margin-top: 16px;}
    #index .box05 .txt01 {font-size: 3.5vw; width: 100%; line-height: 2;}
    #index .box05 .man {display: none;}
    #index .box05 .txt02 {font-size: 4vw; width: 100%; margin: 20px auto 30px;}
    #index .box06 .wave_box {position: relative; top: 0; left: 0; margin: auto; width: 100%; margin-left: 0;}
    #index .box05 .icon01,#index .box05 .icon02 {display: none;}
    #index .box05 .youtube_box {position: relative; right: 0; bottom: 0;}
    #index .box05 .youtube_box .text_box {left: 0; top: 0; bottom: 0; width: 100%; right: 0; box-sizing: border-box; padding: 0 16px;}
    #index .box06 {padding: 0 0 30px;}
    #index .box05 .youtube_box .text01 {font-size: 4vw; padding-bottom: 16px; margin-bottom: 16px;}
    #index .box05 .youtube_box .text02 {font-size: 4vw;}
    #index .box06 .inner {padding: 0 16px; margin-top: -35%;}
    #index .box06 .inner .item,#index .box06 .inner .item:nth-child(3n) {width: 48%; margin-right: 4%;}
    #index .box06 .inner .item:nth-child(2n) {margin-right: 0;}
    #index .box06 .inner .item:nth-child(n + 3) {margin-top: 4%;}
    #index .box06 .inner .item .title {font-size: 3.5vw; line-height: 1.8; margin-top: 16px;}
    #index .box07 {padding: 60px 16px;}
    #index .box07 .box {padding: 40px 0;}
    #index .box07 .logo {top: -40px; left: 0; width: 80px; z-index: 30;}
    #index .box07 .bdr {width: 100%;}
    #index .box07 .icon01,#index .box07 .icon02,#index .box07 .icon03,#index .box07 .icon04 {display: none;}
    #index .box07 .text {font-size: 7vw; letter-spacing: 3vw;}
    #index .box08 {display: block; padding: 0;}
    #index .box08 .con {width: 100%; margin: 0 auto; opacity: 1; transform: translate(0);}
    #index .box08 .txt_box {left: 0; right: 0; margin: auto; width: 100%; box-sizing: border-box; padding: 0 16px;}
    #index .box08 .txt01 {font-size: 5vw; padding-bottom: 10px; margin-bottom: 10px;}
    #index .box08 .txt02 {font-size: 4vw;}
    #index .box08 .con:nth-child(2) {margin: 30px auto 0;}
    #index .box09 .con {margin: 30px auto 0; opacity: 1; transform: translate(0);}
    #index .box08 .bdr,#index .box09 .con .img .bdr {display: none;}
    #index .box08 .con .img, #index .box08 .con .on_img,#index .box09 .con .img,#index .box09 .con .on_img {display: none;}
    #index .box09 .txt_box {left: 0; right: 0; margin: auto; width: 100%; padding: 0 16px; box-sizing: border-box; display: block; top: inherit; bottom: inherit;}
    #index .box09 .left_box {width: auto; margin-right: 0;}
    #index .box09 .txt01 {font-size: 4vw; padding-bottom: 10px; margin-bottom: 10px; width: 100%;}
    #index .box09 .txt02 {font-size: 4vw; text-align: left;}
    #index .box09 .txt03 {font-size: 3.5vw; line-height: 1.8; margin-top: 10px;}
    #index .box09 .con:hover .txt01, #index .box09 .con:hover .txt02, #index .box09 .con:hover .txt03 {color: #000; border-color: #000;}
    #index .box10 {padding: 30px 0;}
    #index .box10 .title_box {width: 100%; height: auto; transform: skewX(-10deg); font-size: 5vw; box-shadow: 5px 5px rgba(202,197,51,.3); margin: -10% auto 30px;}
    #index .box10 .title_box h2 {transform: skewX(10deg); letter-spacing: 1vw; padding: 16px 0;}
    #index .box10 h2 span {font-size: 6vw;}
    #index .box10 .inner {display: block; padding: 0 16px;}
    #index .box10 .btn {width: 100%; height: auto; font-size: 4vw; padding: 20px 0; border: none; background: -webkit-linear-gradient( 180deg,#ea6666 0%, #f66c6c 25%, #38b151 50%, #599cda 75%, #23addd 100%); color: #fff;}
    #index .box10 .btn:nth-child(2) {margin-top: 16px;}
    #index .box10 .btn::before {display: none;}
    #index .box10 .btn::after {width: 10px; height: 10px;}
    #index .box10 .wave_box {clip-path: inset(0);}
    
/*footer*/
    footer {padding-top: 30px;}
    footer .inner {display: none;}
    footer .sp_logo {width: 20%; margin-bottom: 20px;}
    footer .home_link {font-size: 7vw; text-align: center; letter-spacing: 1vw; margin-bottom: 30px;}
    footer .copy {margin-top: 30px; font-size: 3vw;}
	.sp_pop_inner {display: flex; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100;}
    .sp_pop_inner .tel {width: 50%;}
    .sp_pop_inner .mail {width: 50%;}
    .sp_pop_inner a img {width: 100%;}
    
    /*company*/
    #company table {border: none; width: calc(100% - 32px); margin: auto;}
    #company th, #company td {display: block; width: 100%; font-size: 3.5vw; border: none; padding: 15px 10px;}
    #company th {width: 100%; border-right: 0;}
    #company .box01 h2 {margin-bottom: 30px;}
    #company .box01 p {font-size: 3.5vw; padding: 0 16px; margin-top: 20px;}
    #company iframe {height: 300px; box-shadow: none; margin-top: 30px;}
    
/*about*/
    #about .main .part01,#about .main .part02,#about .main .part03,#about .main .part04 {display: none;}
    #about .main {background-size: 20%; padding: 30px 16px;}
    #about .main .bdr {height: 5px;}
    #about .main .txt01 {padding: 10px 16px;}
    #about .main .txt01 span {font-size: 5vw;}
    #about .main .txt02 {font-size: 5vw; margin: 20px auto;}
    #about .main .txt03 {font-size: 6vw;}
    #about .link_box {display: none;}
    #about .box01 {padding: 0;}
    #about .box01 .title_box {width: 100%; right: inherit; transform: skewX(0); height: auto; box-shadow: none; margin: 0 auto; justify-content: center; padding: 12px 0; position: relative; margin-bottom: 20px; left: inherit;}
    #about .box01 .title_box img {width: 8%; transform: skewX(0);}
    #about .box01 h2 {font-size: 5vw; margin-left: 5%; transform: skewX(0);}
    #about .box01 .inner {display: block; font-size: 3.5vw; line-height: 2.;}
    #about .box01 .inner .img01,#about .box01 .inner .img02 {margin: 0 auto 16px;}
    #about .box01 .inner p {padding: 0 16px;}
    #about .box01 .img_box {margin: 30px auto; flex-wrap: wrap; padding: 0 16px;}
    #about .box01 .img_box img {width: 48%;}
    #about .box01 .img_box img:nth-child(3) {margin-top: 4%;}
    #about .l_bnr {border: none;}
    #about .box01 .bnr {display: none;}
    #about .box04 .b_box {margin: 30px auto; padding: 0 16px;}
    #about .box04 .b_box .btn {font-size: 3.5vw; width: 48%; height: auto; padding: 10px 0;}
    #about .l_bnr {padding: 30px 16px; border: 3px solid #000;}
    #about .l_bnr .box {padding: 16px; border: none;}
    #about .l_bnr .txt01 {font-size: 4vw; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid #000; margin: auto;}
    #about .l_bnr .txt02 {font-size: 5vw; margin-top: 10px; text-align: center;}
    #about .l_bnr .txt03 {font-size: 6vw; letter-spacing: 1vw; margin-top: 10px;}
    #about .l_bnr .icon {display: none;}
    #contact_banner .box09 .txt_box {left: 0; right: 0; margin: auto; width: 100%; padding: 0 16px; box-sizing: border-box; display: block; top: inherit; bottom: inherit;}
    #contact_banner .box09 .left_box {width: auto; margin-right: 0;}
    #contact_banner .box09 .txt01 {font-size: 4vw; padding-bottom: 10px; margin-bottom: 10px; width: 100%;}
    #contact_banner .box09 .txt02 {font-size: 4vw; text-align: left;}
    #contact_banner .box09 .txt03 {font-size: 3.5vw; line-height: 1.8; margin-top: 10px;}
    #contact_banner .box09 .con:hover .txt01, #contact_banner .box09 .con:hover .txt02, #contact_banner .box09 .con:hover .txt03 {color: #000; border-color: #000;}
    #contact_banner .box10 {padding: 30px 0;}
    #contact_banner .box10 .title_box {width: 100%; height: auto; transform: skewX(-10deg); font-size: 5vw; box-shadow: 5px 5px rgba(202,197,51,.3); margin: -10% auto 30px;}
    #contact_banner .box10 .title_box h2 {transform: skewX(10deg); letter-spacing: 1vw; padding: 16px 0;}
    #contact_banner .box10 h2 span {font-size: 6vw;}
    #contact_banner .box10 .inner {display: block; padding: 0 16px;}
    #contact_banner .box10 .btn {width: 100%; height: auto; font-size: 4vw; padding: 20px 0; border: none; background: -webkit-linear-gradient( 180deg,#ea6666 0%, #f66c6c 25%, #38b151 50%, #599cda 75%, #23addd 100%); color: #fff;}
    #contact_banner .box10 .btn:nth-child(2) {margin-top: 16px;}
    #contact_banner .box10 .btn::before {display: none;}
    #contact_banner .box10 .btn::after {width: 10px; height: 10px;}
    #contact_banner .box10 .wave_box {clip-path: inset(0); left: 0; top: 0; width: 100%; margin-left: inherit; position: relative;}
    #news .inner {display: block; padding: 0 16px;}
    #news .item {width: 100%; padding-left: 0; margin-right: 0; border-left: none; border-bottom: 2px solid #ff5323; padding-bottom: 16px;}
    #news .item:nth-child(n + 2) {margin-top: 20px;}
    #news .img {width: 100%;}
    #news .btn {left: auto; right: 16px; bottom: 20px; font-size: 3.5vw; padding: 0 30px 0 10px;}
    #news .time {font-size: 4vw;}
    #news h3 {font-size: 4vw;}
    #news .text {font-size: 3.5vw;}
    #news_single .img {width: 100%;}
    #news_single .box01 {padding: 30px 16px;}
    #news_single .box01 h1 {font-size: 4vw; margin-bottom: 16px; line-height: 2;}
    #news_single .box01 .text {font-size: 3.5vw; line-height: 2;}
    .nav_under {margin-top: 30px; padding: 0 16px;}
    .navigation .nav_btn {width: 48%;}
    .navigation .next-entries, .navigation .previous-entries {width: 48%; height: auto; font-size: 3.5vw;}
    .nav_archive_btn {width: 48%; height: auto; font-size: 3.5vw; padding: 10px 0;}
    .navigation .next-entries::after, .navigation .previous-entries::after {display: none;}
    
    /*contact*/
    #contact .text {font-size: 4.5vw;}
    #contact .tel {font-size: 6vw; margin-bottom: 30px;}
    #contact .tel span {font-size: 8vw;}
    #contact form {padding: 0 16px;}
    #contact .over {margin-bottom: 16px; justify-content: space-between;}
    #contact .txt01 {width: auto; font-size: 16px;}
    #contact .essential {width: auto; height: auto; padding: 5px 10px;}
    #contact .form_btn {width: 100%; height: auto; margin: 30px auto 0;}
    #contact .form_btn input {padding: 16px 0;}
    .wpcf7-spinner {display: none!important;}
    #contact .thanks {padding: 0 16px;}
 
}
@media screen and (max-width:350px) {
header h1 {display: none;}
}