@charset "utf-8";

/* -------（リセットCSS）-----------------------------------------------*/ 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,header, section, article, footer, article, aside, time ,nav,a,figure{margin:0;padding:0;}
fieldset,img{border:0; height: auto; width: auto;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal; margin: 0;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
p{text-justify:inter-ideograph;margin: 0 0 1em 0;}
header, section, article, footer, article, aside, time ,nav { display: block; }
figure{ line-height:0;}
*{ box-sizing: border-box;}


/* =custom style
------------------------------------------------------------------------------------------*/
:root {
  --keyc:#00cc66;
  --font1:"Noto Sans JP", sans-serif;
  --font2:"Oswald", "Noto Sans JP", sans-serif;
}


/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	font-family: var(--font1);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.8em;
	background-color: #000;
	color: #fff;
}
/*
body:before{ content: ""; display: block; position: fixed; height: 100vh; width: 100%; 
	background-image: url("../images/bg.webp"); 
    background-repeat: no-repeat; 
	background-position: center; 
	background-size: cover; 
	z-index: -2; top: 0; left: 0; opacity: 0.2;}
*/

html {overflow-y:scroll; height:100%;}

a {color: var(--keyc);text-decoration:none; outline:none; transition: 0.1s;}
a:hover {  opacity: 0.8;}

.pc_only{ display:block;}
.sp_only{ display:none !important;}

#container{ position:relative;}

@media only screen and (max-width: 768px){
    body{
        font-size: 14px;
        line-height: 1.8em;
    }
    
    .pc_only{ display:none;}
    .sp_only{ display:block !important;}
}


/* アニメーション */
.loader_bg{ background-color:#000; width:100%; height:100vh; position:fixed; top:0; left:0; z-index: 1000;}
.loader{background-image:url("../images/logo.svg");background-repeat : no-repeat; background-size:10%; background-position : 50% 46%; z-index:1001; position:fixed; top:0; left:0; width: 100%; height: 100%; opacity:.0; animation: anime_loader 1s; animation-fill-mode:both;}

.intro_loader .top_tit{  -ms-filter: blur(40px); filter: blur(40px);}
body.intro_loader:before{ transform: scale(1.5)}

@keyframes anime_loader {
    0%  { opacity:0;}
    100%  { opacity:1;}
}
.intro_on .loader{ animation:none; animation-fill-mode: inherit;}
.intro_on .top_tit{  -ms-filter: blur(0); filter: blur(0);}
body.intro_on:before{ transform: scale(1)}

/* 00 */

@media only screen and (max-width: 768px){
    .loader{ background-size:30%;}
}

/* =header
-----------------------------------------------------------------------------------------*/
header { text-align:left; position:fixed; z-index:99; top:0; width:100%; display: flex;align-items: center; justify-content: flex-end;font-family: var(--font2);}
header img{ width: 100%;}

header .header_logo{ display: block; width: 17%; position: absolute; top:1vw; left: 1.5%; }

.toggle_nav,.nav,.global,.nav li,.nav li a{ height: 100%;}
.global{ width: 100%; margin-right:1.5vw; display: flex; align-items: center;}

.nav li a{ line-height:1em; font-size:16px;  text-align:center; padding:30px 1.2em ; position:relative; text-decoration: none; color: #fff; display: flex; align-items: center; font-weight: 600;}
.nav li.sns a{ padding: 0 1em; }
.nav li.sns a img{ width: 25px;}
.nav li a:hover,
.nav li a.active{ color: var(--keyc);}
.nav li a.disactive {color: #999;}
.nav_trigger{display: none;}


@media only screen and (max-width: 768px){
	header {padding: 0;}
	header .header_logo { width: 33%; left: 3%; top: 12px;}	
    
	.global{width:100%; position:fixed; z-index:10; top:0; left:0; overflow-y: hidden; padding-top:0; height:0; background-color:rgba(0,0,0,0.8); box-sizing: border-box; display: inherit;
	 -webkit-transition: 1s ease;  -moz-transition: 0.5s ease;  -o-transition: 0.5s ease;  -ms-transition: 0.5s ease;  transition:0.5s ease;}
	.global li{width: 100%; display:inherit;}
	.nav-active .global{ height:100vh;padding-top:47px;}
	.nav li.sp_top{ display: inherit;}

	.toggle_nav{ height: auto; -webkit-transition: 0.2s ease;  -moz-transition: 0.2s ease;  -o-transition: 0.2s ease;  -ms-transition: 0.2s ease;  transition: 0.2s ease;}
	.nav{ margin-bottom:0; width:100%; height:inherit;}
	.nav li{ padding-right: 0;height: auto;}
	.nav li a:hover,nav li a.at{  border-bottom: none;}
	.nav li a{ width:100%; max-width:inherit; text-align:center; padding: 1em 7%; height: auto; color: #fff;}
    .nav li.sns a{ padding: 1em 7%;}
    .nav li.sns a img{ width: 30px;}
	.nav li a:hover,
	.nav li a.active{color:var(--keyc2);background-color: var(--keyc);}

	/* Default navigation icon */
	.nav_trigger { display: block; position: fixed; width: 30px; height: 25px; right:4vw; top: 7px; z-index: 200;}
	.nav-active .nav_trigger { opacity: 0.7;}
	.nav_icon { display: inline-block; position: relative; width: 30px; height: 2px; background-color:var(--keyc); -webkit-transition-property: background-color, -webkit-transform; transition-property: background-color, -webkit-transform; transition-property: background-color, transform; transition-property: background-color, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms;}
	.nav_icon:before,
	.nav_icon:after { content: ''; display: block; width: 30px; height: 2px; position: absolute; background:var(--keyc); -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms;}
	.nav_icon:before { margin-top: -9px;}
	.nav_icon:after { margin-top: 9px;}
	.nav-active .nav_icon { background: rgba(0, 0, 0, 0);}
	.nav-active .nav_icon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg);background:#fff;}
	.nav-active .nav_icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background:#fff;}

	.nav li a:hover span.btm,
	.nav li a.active span.btm{ display:none;}
	.nav li a span.jp{ font-size:3vw;}
}


/* =foot
-----------------------------------------------------------------------------------------*/
footer{padding: 60px 0;background-color: #000;}
footer .sns_box{margin-bottom: 120px;}
footer .sns_box .sstit{font-family: var(--font2);font-size: 20px;font-weight: bold;line-height: 1.8em;letter-spacing: 0.05em;margin-bottom: 2.5em;}
footer .sns_box ul{display: flex;justify-content: center;gap: 0 60px;}
footer .sns_box ul li{width: 60px;}
footer .sns_box ul li a{display: block;}
footer .sns_box ul li a img{width: 100%;}

footer .copy{font-family: var(--font2);font-size: 16px;font-weight: bold;line-height: 1.5em;}

@media only screen and (max-width: 768px){
    footer{ padding: 40px 0;}
    footer .sns_box{margin-bottom: 80px;}
    footer .sns_box .sstit{font-size: 18px; margin-bottom: 2em;}
    footer .sns_box ul{gap: 0 30px;}
    footer .sns_box ul li{width: 40px;}
	footer .copy{ font-size: 14px;}
}

/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{margin: 0;  text-align:center;position:fixed; right:3vw; bottom:2vw;  z-index:10; transition: 0.3s;}
.page_top a{background-color:#e85799;border-radius: 50%;height:12vw; width:12vw; line-height:1.3em; color:#fff; font-size:1.2vw; text-decoration: none; display: flex; align-items: center; justify-content: center; font-weight: bold;filter: drop-shadow(0px 0px 0.4vw rgba(0,0,0,0.4)); border: 0.4vw solid #fff;}
.page_top a:hover{text-decoration:none; opacity: 1; transform: scale(1.1);}
.page_top.off{bottom: -16vw;}


@media only screen and (max-width: 768px){
	.page_top a{height:22vw; width:22vw; line-height:1.3em;  font-size:2.7vw;}
	.page_top.off{bottom: -24vw;}
}

/******* youtube *******/
.youtube{position:relative;width:100%; margin:0 auto;padding-top:56.25%;}
.youtube iframe{position:absolute;top:0;right:0;width:100%;height:100%;}



#error_404 { padding: calc(min(110px, 11vw)*1.5) 0;text-align: center;}
#error_404 p {color: #fff;}
#error_404 .title {font-size: 30px;line-height: 1em;margin-bottom: 1em;font-family: var(--font2);}
#error_404 .text {margin-bottom: 3em;}
#error_404 .link_flex {display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 auto;}
#error_404 .error_toplink {position: relative;display: block;width: min(230px, 70%);height: 60px;display: grid;place-items:center;padding-top: .3em;background-color: var(--keyc);color: #000;font-weight: bold;font-size: min(18px,4vw);white-space: nowrap;letter-spacing: 0.05em;margin: 0 auto;transition: 0.2s;font-family: var(--font2);}	


/* =共通
------------------------------------------------------------------------------------------*/
main{ width: 100%; text-align: left;} 
main img{ max-width: 100%; height: auto;}

main.in_page{padding: 120px 0;}

.container{ width: 90%; max-width: 1200px; margin: 0 auto;}
.container.w1600{ max-width: 1600px;}

@media only screen and (max-width: 768px){
    main.in_page{padding: 80px 0;}
}

/******* ボタン *******/
.btn_area.left{text-align: left;}
.btn_area.right{text-align: right;}
.btn_area.center{text-align: center;}

.btn{display: inline-block;background-color: var(--keyc);color:#000;line-height: 1em;font-family: var(--font2);font-size: 20px;position: relative;text-align: center;padding: 1.3em 0;text-decoration: none;width: min(30vw,300px);}
/* .btn::after { content: ""; position: absolute; top: calc(50% - 3px); right: 4%; width: 4px; height: 4px; border: 1px solid; border-color: transparent #fff #fff transparent; transform: rotate(-45deg);} */

@media only screen and (max-width: 768px){
    .btn{padding: 1.2em 0;font-size: 16px;width: 60%;}
}

/******* 見出し *******/
.tit{color: #e85799; line-height: 1em; font-size: 9vw; margin-bottom: 0.25em;}
.stit{font-size: 40px;line-height: 1.8em;margin-bottom: 1.5em;text-align: center;color: var(--keyc);font-weight: bold;font-family: var(--font2);}
.stit.jp{ font-size: 40px;}

@media only screen and (max-width: 768px){
    .tit{ text-align: center;}
    .stit{font-size: 36px;line-height: 1.5em;margin-bottom: 1em;}
}


/* = page contents
------------------------------------------------------------------------------------------*/
@keyframes zoomUp {
  0% {transform: scale(1);}
  100% {transform: scale(1.15);}
}
.swiper{ width: 100%; overflow: hidden; opacity: 0.5; height:100vh; position: fixed;z-index: -3;}
.swiper-wrapper{ z-index: -2;}
.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {  animation: zoomUp 7s linear 0s normal both;}

.swiper-slide .swiper-img{ height: 100%; }
.swiper-slide .swiper-img img { height: 100%; width: 100%; max-width: inherit;object-fit: cover;}

.swiper-pagination-bullet{ background: #fff; opacity: 0.5;}
.swiper-pagination-bullet-active{ opacity: 1;}

.bg{position: fixed;z-index: -2;width: 100%;height: 100vh;display: flex;opacity: 0.3;top: 0;left: 0;}
.bg .bg_l{ background-image: url("../images/bg_l.webp"); height: 100%; width: 50%; background-repeat: no-repeat; background-size: contain; background-position: left top;}
.bg .bg_r{ background-image: url("../images/bg_r.webp"); height: 100%; width: 50%; background-repeat: no-repeat; background-size: contain; background-position: right top;}
.bg .bg_c{background-image: url("../images/bg_c.webp");height: 80%;width: 40%;background-repeat: no-repeat;background-size: contain;background-position: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);opacity: 0.4;}

.overlay {background-image: url(../images/bg_line.webp);background-color: rgba(0, 0, 0, 0);position: fixed;left: 0;top: 0;height: 100%;width: 100%; z-index: -1;  }

.top{width: 100%;height: 100vh;display: flex;align-items: flex-end;justify-content: flex-end;padding: 3% 3%;margin-bottom: 12vw;}
.top img{  width: 75%;}

.bg_wrap{ position: relative;}
.bg_wrap:before{ display: block; content: ""; background-color: rgba(0,0,0,0.8); position: absolute; width: 100%; height: 100%; z-index: -1; margin-top: 2.5vw;}

@media only screen and (max-width: 768px){
    .top{ align-items: center; justify-content: flex-start; padding: 5%; margin: 0;}
    .top img{ width: 90%;}
    
    .bg .bg_l{background-position: -14vw top;}
    .bg .bg_r{background-position: 40vw top;}
    
    .bg_wrap:before{ margin-top: 0;}
}


/* parallax */
.onload_quick.up,
.reveal.up{opacity: 0; transform: translateY(60px); transition: 1.0s;}
.onload_quick.up.open,
.reveal.up.scroll_in{opacity: 1; transform: translateY(0);}


/* about */
#top_about{ margin-bottom: 7vw;}

.top_about_box{display: flex;gap: 0 5%;}
.top_about_box .left_box{width: 40%;}
.top_about_box .right_box{width: 55%;text-align: left;margin-top: 6vw;}
.top_about_box .right_box .stit{text-align: left;position: relative;padding-left: 70px;font-size: 30px;}
.top_about_box .right_box .stit:before{position: absolute;content: "";display: block;width: 60px;height: 1px;background-color: var(--keyc);top: 1em;left: 0;}
.top_about_box .right_box .txt_box{margin-bottom: 60px;}
.top_about_box .right_box .txt_box p{margin-bottom: 2em;}
.top_about_box .right_box .txt_box p:last-of-type{margin-bottom: 0;}

.in_about_box{margin-bottom: 7vw;}
.in_about_box figure{position: relative;height: 0;background-color: #000000b3;padding-bottom: 56.25%;border: 1px solid #333;margin-bottom: 60px;overflow: hidden;}
.in_about_box figure img{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: auto;max-width: 100%;height: auto;max-height: 100%;}
.in_about_box p{margin-bottom: 2em;font-size: 1.1em;line-height: 1.8em;}

.about_list{ background-color: rgba(34,34,34,0.8); padding: 7vw 0;}
.about_list dl{display: flex; border-bottom: 1px solid #999; padding: 20px;}
.about_list dl:first-of-type{border-top: 1px solid #999;}
.about_list dl dt{width: 10em;}
.about_list dl dd{width: calc(100% - 10em);}

@media only screen and (max-width: 768px){
    #top_about{ margin-bottom: 20vw;padding-top: 6vw;}

    .top_about_box{flex-direction: column;}
    .top_about_box .left_box{width: 100%;margin-bottom: 20px;}
    .top_about_box .left_box figure{ overflow: hidden; height: 100vw; position: relative;}
    .top_about_box .left_box figure img{position: absolute; top: 50%; transform: translateY(-50%);}
    .top_about_box .right_box{width: 100%;margin-top: 0;}
    .top_about_box .right_box .stit{font-size: 24px;}
    .top_about_box .right_box .txt_box{margin-bottom: 40px;}
    .top_about_box .right_box .txt_box p{margin-bottom: 1.5em;}

    .in_about_box{margin-bottom: 40px;}
    .in_about_box figure{margin-bottom: 20px;}
    .in_about_box p{margin-bottom: 1.5em;font-size: 1em;line-height: 1.8em;}

    .about_list{ padding: 40px 0;}
    .about_list dl{flex-direction: column; padding: 20px;}
    .about_list dl dt{width: 100%;font-size: 1.15em;font-weight: bold;line-height: 1.8em;margin-bottom: 0.5em;}
    .about_list dl dd{width: 100%;}
}


/* news */
#top_news{ margin-bottom: 7vw;}

.news_list{margin-bottom: 40px;}
.news_list li{}
.news_list li a{color: #fff;padding: 20px 0;border-bottom: 1px solid #333333;display: flex;}
.news_list li a:hover{background-color: #ffffff29;}
.news_list li a .date{margin: 0;width: 10em;}
.news_list li a .title{margin: 0;width: calc(100% - 10em);}
@media only screen and (max-width: 768px){
    #top_news{ margin-bottom: 20vw;}

    .news_list{margin-bottom: 20px;}
    .news_list li a{padding: 16px 0;flex-direction: column;}
    .news_list li a .date{width: 100%;margin-bottom: 0.6em;}
    .news_list li a .title{width: 100%;}
}


/* works */
#top_works { background-color: rgba(34,34,34,0.8); padding: 7vw 0;}

.works_list{margin-bottom: 80px;display: flex;flex-wrap: wrap;gap: 40px 2%;}
.works_list li{width: 32%;transition: 0.2s;}
.works_list li:hover{transform: translateY(-10px); transition: 0.2s;}
.works_list li a{color: #fff;}
.works_list li a figure{margin-bottom: 12px;position: relative;height: 0;padding-bottom: 100%;overflow: hidden;}
.works_list li a figure img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);max-width: 100%;width: auto;max-height: 100%;height: auto;background-color: #000;}
.works_list li a .title{margin: 0;font-size: 20px;line-height: 1.8em;}
.works_list li a .date{margin: 0;}
@media only screen and (max-width: 768px){
    #top_works { padding: 40px 0;}
    #top_works .btn{width: 100%;}

    .works_list{margin-bottom: 40px; flex-direction: column; gap: 30px 0;}
    .works_list li{width: 100%;}
    .works_list li a figure{margin-bottom: 8px;}
    .works_list li a .title{font-size: 16px;line-height: 1.8em;}
}


/* paging */
.paging{text-align: center;}
.pagination {clear: both;padding: 20px 0;position: relative;font-size: 14px;line-height: 14px;text-align: center;display: inline-block;}
.pagination-box {display: inline-block;}
.pagination span, .pagination a {display: block;float: left;margin: 2px 6px 2px 0;padding: 10px 12px 10px 12px;text-decoration: none;width: auto;color: var(--keyc);background: transparent;position: relative;z-index: 1;border: 1px solid var(--keyc);}
.pagination span:after, .pagination a:after{content: "";position: absolute;background-color: #555;width: 34px;height: 34px;z-index: -1;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(45deg);transition: 0.2s ease;display: none;}
.pagination a:after{background-color: transparent;}
.pagination a:hover{color: #000;background-color: var(--keyc);}
.pagination a:hover:after{background-color: #555; transition: 0.2s ease;}
.pagination .current{padding: 10px 12px 10px 12px;background-color: var(--keyc);color: #000;}
.pagination .dots{border: none;}

@media only screen and (max-width: 413px) {
.pagination {font-size: 12px;line-height: 12px;}
.pagination span, .pagination a {padding: 8px 10px 8px 10px;}
.pagination a:hover{color: #555;}
.pagination a:hover:after{background-color: transparent;}
.pagination .current{padding: 8px 10px 8px 10px;}
}


/* single */
.single{text-align:left;position:relative;opacity:1;}
.single .single_top{margin-bottom: 40px;}
.single .tit{font-size: 24px;font-weight: bold;line-height: 1.5em;margin-bottom: 6px;color: var(--keyc);}
.single .date{font-size: 16px;font-weight: bold;line-height: 1.8em;}
.single .main_img{position: relative;height: 0;background-color: #000000b3;padding-bottom: 56.25%;border: 1px solid #333;margin-top: 12px;overflow: hidden;}
.single .main_img img{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: auto;max-width: 100%;height: auto;max-height: 100%;}

.single .txt_box{border-bottom: 1px solid #ccc;padding-bottom: 30px;margin-bottom: 60px;word-break: break-all;}
.single .txt_box a{color: var(--keyc);text-decoration:underline;display: inline;}
.single .txt_box a:hover{}
.single .txt_box img{ max-width: 100%; width: revert-layer; height: auto; display: inline-block; margin-bottom: 24px;}
.single .txt_box .btn{display: block;width: 100%;text-decoration: none;color: #000;font-family: var(--font1);font-weight: bold;}
.single .txt_box blockquote{padding: 40px;margin-bottom: 40px;background-color: rgba(34, 34, 34, 0.8);}

.single .txt_box hr{ margin: 3em 0; height: 1px; background-color: #ccc; border: none;}

.single .txt_box h1,
.single .txt_box h2,
.single .txt_box h3,
.single .txt_box h4,
.single .txt_box h5{ font-weight: bold; line-height: 1.5em; margin-bottom: 1em;}
.single .txt_box h1{font-size: 26px;color: var(--keyc);padding-bottom: 0.5em;margin-bottom: 1em;border-bottom: 1px solid;padding-top: 1em;}
.single .txt_box h2{font-size: 24px;color: var(--keyc);margin-bottom: 1em;border-left: 1px solid;margin-top: 1.5em;padding-left: 0.8em;}
.single .txt_box h3{font-size: 22px;color: var(--keyc);margin-bottom: 1em;padding-top: 1em;}
.single .txt_box h4{ font-size: 20px;}
.single .txt_box h5{ font-size: 18px;}

@media only screen and (max-width: 768px){
.single{}
.single .single_top{margin-bottom: 20px;}
.single .tit{font-size: 18px;margin-bottom: 4px;text-align: left;}
.single .date{font-size: 14px;}
.single .main_img{}

.single .txt_box{margin-bottom: 20px;}
.single .txt_box a{ font-size: 16px;}
.single .txt_box blockquote{padding: 20px;margin-bottom: 20px;}

.single .txt_box h1{ font-size: 24px;}
.single .txt_box h2{ font-size: 22px;}
.single .txt_box h3{ font-size: 20px;}
.single .txt_box h4{ font-size: 18px;}
.single .txt_box h5{ font-size: 16px;}

.single .txt_box hr{ margin: 2em 0;}
}


/* contact */
#in_contact form {max-width: 800px;width: 100%;margin: 0 auto;position: relative;}
#in_contact .form_area{background-color: rgba(34, 34, 34, 0.8);padding: 7vw 0;}

#in_contact .f_contents {display: flex;align-items: baseline;justify-content: space-between;width: 100%;margin-bottom: 30px;}
#in_contact .f_contents p {font-family: coquette, "Noto Sans JP", sans-serif;width: 20%;font-size: 1.3em;font-weight: bold;line-height: 1.5em;text-align: left;color: #fff;margin: 0;}
#in_contact .f_contents p .small {display: block;font-size: 0.8em;}
#in_contact .top.f_contents p {vertical-align: top;}
#in_contact .f_contents p:nth-child(2) {width: 76%;background-color: transparent;padding: 0;}
#in_contact .f_contents input, 
#in_contact .f_contents textarea {width: 100%;font-size: 16px;line-height: 1.5em;display: block;padding: 12px 16px;background-color: #444;color: #fff;border: none;border-radius: 0;font-family: "Noto Sans JP", sans-serif;}
#in_contact .f_contents textarea {height: 16vw;vertical-align: inherit;font-family: "メイリオ", "Meiryo", "MS PGothic", "Osaka", Arial, sans-serif;}
#in_contact .btn {-webkit-appearance: none;border: none;width: 100%;font-size: 1.5em;font-weight: bold;cursor: pointer; transition: 0.2s;}
#in_contact .btn:hover{opacity: 0.8; transition: 0.2s;}
#in_contact .send:hover {transform: translateY(-3px);}
#in_contact .other_contact .f_contents p {font-size: 20px;}

.wpcf7-radio .wpcf7-list-item {margin: 0;margin-right: 30px;display: table;width: 9%;float: left;text-align: left;}
.wpcf7-radio .wpcf7-list-item.last {width: 7em;}
.wpcf7-radio .wpcf7-list-item input {display: table-cell !important;height: 20px;width: 20px !important;}
.wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label {display: table-cell;font-size: 18px;}
span.wpcf7-not-valid-tip {font-size: 12px !important;line-height: 1.5em;font-weight: bold !important;margin-top: 0.6em;color: #ff0000 !important;}
div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {border: none !important;color: #ff0000 !important;background-color: #fff;font-size: 14px;font-weight: bold;}
.wpcf7 form.sent .wpcf7-response-output{color: var(--keyc) !important;}
div.wpcf7-mail-sent-ok {border: none !important;color: var(--keyc) !important;background-color: #fff;font-size: 14px;font-weight: bold;}
div.wpcf7-response-output {margin: 0 !important;width: 100%;margin-top: -1.5em !important;margin-left: auto !important;border: none !important;font-weight: bold;color: #ff0000 !important;text-align: center;}
.wpcf7-spinner{display: block;margin: 0 auto;}
#in_contact .other_contact div.wpcf7-response-output {margin: 0 !important;width: 76%;margin-top: inherit !important;margin-left: inherit !important;position: absolute;bottom: -7px;right: 0;}

@media only screen and (max-width: 768px) {
  #in_contact .form_area{padding: 40px 0;}

  #in_contact .notice {font-size: 12px;line-height: 1.5em;margin-bottom: 20px;}
  #in_contact .f_contents {display: block;margin-bottom: 16px;}
  #in_contact .f_contents p {display: block;width: 100%;font-size: 1em;margin-bottom: 0.2em;}
  #in_contact .f_contents p:nth-child(2) {display: block;width: 100%;}
  #in_contact .f_contents input, #in_contact .f_contents textarea {display: block;padding: 6px;border-radius: 0;}
  #in_contact .f_contents textarea {height: 50vw;}
  #in_contact .send {width: 100%;font-size: 20px;padding: 14px 0;margin-left: 0;}
  #in_contact .other_contact .f_contents p {font-size: 18px;margin-bottom: 4px;}

  .wpcf7-radio .wpcf7-list-item {margin-right: 10px;width: 20%;}
  .wpcf7-radio .wpcf7-list-item input {height: 14px;width: 14px !important;}
  .wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label {font-size: 14px;}
  #in_contact .other_contact div.wpcf7-response-output, div.wpcf7-response-output {width: 100%;}
}



/* =colorbox
------------------------------------------------------------------------------------------*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:var(--keyc);}
#colorbox{outline:none;}
   /* #cboxContent{margin-bottom:60px; overflow:visible;}*/
    #cboxContent{margin-right:60px; overflow:visible; margin-bottom:0;}
        .cboxIframe{background:#000;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background-color: var(--keyc2); position:relative; z-index:10000;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:var(--keyc2);}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxClose{text-indent:-9999px; width:40px; height:100%; position:absolute; top:0;background:url(../images/controls2.png) no-repeat 0 0;}
		
        #cboxClose{background-position:7px 0; right:-50px; border:0; outline:none;}
        #cboxClose:hover{background-position:-40px 0;}


@media screen and (max-width: 768px) {
#cboxContent{ margin-right:0; margin-bottom:50px;}
#cboxClose{ right:0; top:inherit; bottom:-35px; height: 22px;}
}



/************* ANIMATIONS ***************/

.anime{ position:relative;  opacity:0;}
@keyframes imageAnimation { 
  0% { opacity: 0; animation-timing-function: ease-in; }
  10% { opacity: 1; animation-timing-function: ease-out; }
  25% { opacity: 1; }
  37% { opacity: 0; }
  100% { opacity: 0; }
}

/* SLIDE BOX ANIMATION */
@keyframes play {
  from {transform: translateX(-100%);opacity: 0;}
  to {transform: translateX(0);opacity: 1;}
}
@keyframes maskOut {
  from {transform: translateX(0); }  
  to {transform: translateX(101%); }
}

.play.blkin { animation-name: play; animation-duration: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative;}
.play.blkin:before { animation-name: maskOut; animation-duration: .4s; animation-delay: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); content: ''; position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background: #333;}

.play.fade_up {animation-fill-mode:both; animation-duration:1.5s; animation-name: fadeInUp;visibility: visible !important;}

@-webkit-keyframes fadeInUp { 
    0% { opacity: 0; -webkit-transform: translateY(100px); } 
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.play.fade_in { animation-fill-mode:both; animation-duration:3s; animation-name: fadeIn; visibility: visible !important;}
@-webkit-keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}
@keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}