@charset "utf-8";
/* 
共通
 */

.only_PC{
display:block;
}

.only_SP{
display:none;
}


/* 全体高さ */
html {
	height: 100%;
}


/* body指定 */
body {
font-family: 'Noto Sans JP', "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.05em;
background-color: #6abf4b;
color: #333333;
height: 100%;
margin: 0;
}

img{
	width: 100%;
	height:auto;
}


/* 基本リンク指定 */
a:link { color: #f2f2f2; text-decoration: none; }
a:visited { color: #f2f2f2; text-decoration:none; }
a:hover { color: #ddd; text-decoration: none; transition:0.3s;}
a:active { color: #f2f2f2; text-decoration: none; }

/* scroll */
#head_scroll{
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
text-align: center;
transition:1s;
}

#head_scroll p{
font-size: 0.7em;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 700;
color:#f2f2f2;
}

#head_scroll a{
display: block;
width: 50px;
height: 50px;
border-radius: 100%;
border: solid 3px #f2f2f2;
}

#head_scroll i{
color:#f2f2f2;
font-size: 2.0em;
animation: scrollDown1 2.5s ease infinite;
}

@keyframes scrollDown1{
    0%{
        transform: translateY(-5px);
        opacity: 0;
    }
    40%,70%{
        transform: translateY(15px);
        opacity: 1;
    }
    100%{
        transform: translateY(20px);
        opacity: 0;
    }
}

.hidden_scroll{
display: none;
}

/* header */
header{
text-align: center;
}

#head_bar{
position: relative;
color: #222;
height: 100vh;
transition:0.3s;
background: #6abf4b;
background-image:url(../img/pattern01c.png);
background-size:30px;
}

#head_bar.fixed{
position: fixed;
padding:  0;
height: 70px;
background: #6abf4b;
cursor: pointer;
background-image:url(../img/pattern01c.png);
background-size:30px;
}

#head_bar.fixed #head_scroll{
display: none;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

#head_bar h1{
display: none;
width: 100%;
 position: absolute;
  top: 50%;
  left: 50%;
transform: translate(-50%,-50%);
padding-bottom: 100px;
box-sizing: border-box;
font-size: 1.5em;
letter-spacing: 0;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 900;
color: #f2f2f2;
}


#head_bar.fixed h1{
display: block;
padding-bottom: 0;
}

#head_bar.fixed h1 span{
display: inline-block;
vertical-align: middle;
}

#head_bar.fixed h1 img{
height: 36px;
margin-right: 15px;
}

#head_bar h2{
width: 100%;
height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#head_bar h2 img{
max-width: 50%;
max-height: 70%;
animation: slideUp 1s 1;
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
  50% {
    opacity: 1;
    transform: translateY(-20px);
  }
 
  55% {
    transform: translateY(10px);
  }
  
  60% {
    transform: translateY(0);
  }

  90% {
    transform: scale(1.2);
  }
 
  80%, 100% {
    transform: scale(1.0);
  }
}

#head_bar.fixed h2{
display: none;
}


/* intro */
.wrap_A{
position: fixed;
inset: 0;
z-index: -10;
overflow: hidden;
  width: 100%;
    height: 110vh;
  background: #f2f2f2;
}

.wrap_A p{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 110vh;
}

.wrap_A img{
max-width: 40%;
max-height: 60%;
 margin: 100px 0;
}


.start_intro {
  animation: img-wrap 1s cubic-bezier(.4, 0, .2, 1);
}

@keyframes img-wrap {
  0% {
    clip-path: circle(0 at 50% 50%);
    -webkit-clip-path: circle(0 at 50% 50%);
  }

  100% {
    clip-path: circle(100% at 50% 50%);
    -webkit-clip-path: circle(100% at 50% 50%);
  }
}


/* main */
#main{
padding-top: 68px;
margin-top: -68px;
}

.wrap_B{
width:100%;
text-align:center;
background: #fccf00;
background-image:url(../img/pattern01b.png);
background-size:30px;
box-sizing: border-box;
overflow: hidden;
margin-top: 110vh;
}

.main_grid{
display: grid;
grid-template-columns: 41% 1fr;
grid-gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 100px 90px;
box-sizing: border-box;

}

/* contact */
.wrap_C{
width:100%;
box-sizing: border-box;
padding: 50px 50px;
background: #f29600;
 background-image:
	 repeating-linear-gradient(45deg,rgba(255,255,255,0.1), rgba(255,255,255,0.1) 7px,transparent 0, transparent 14px);
color: #f2f2f2;
overflow: hidden;
}

#contact {
display: grid;
grid-template-columns: 55% 1fr;
grid-gap: 30px;
text-align: left;
max-width: 1260px;
margin: 0 auto;
}


#info{
width: 100%;
text-align: center;

}

#info h3{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 700;
font-size: 1.5em;
line-height: 1.6em;
background: #f2f2f2;
color: #f29600;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
}

#info p{
font-family: 'Noto Serif JP', serif;
font-weight: 900;
line-height: 2.0em;
}

.contact_tel{
font-size: 3.2em;
}

.contact_mail{
font-size: 2.2em;
}

/* content */
.wrap_D{
width:100%;
box-sizing: border-box;
padding: 80px 50px;
background: #ffeabd;
background-image:url(../img/pattern01b.png);
background-size:30px;
 overflow: hidden;
}

.content{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
text-align: center;
max-width: 1260px;
margin: 0 auto;
box-sizing: border-box;
}

.sub_ill_01{
width: 30%;
margin: 10px auto;
}

.sub_ill_02{
width: 70%;
margin: 10px auto;
}

.sub_ill_03{
width: 35%;
margin: 10px auto;
}

.content_headline{
width: 100%;
height: 100px;
border-radius: 50px;
   margin-bottom:15px;
   box-sizing: border-box;
}

.content h4{
  display: flex;
  justify-content: center;
  align-items: center;
color: #f2f2f2;

width: 100%;
height: 100px;
border-radius: 50px;
border: solid 5px #f2f2f2;
   margin: 0 auto;
   box-sizing: border-box;
font-family: 'Mochiy Pop P One', sans-serif;
font-weight: 400;
font-size: 1.5em;
line-height: 1.4em;
animation: headline 3s cubic-bezier(.4, 0, .2, 1) infinite alternate;
  background: linear-gradient(to right top, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f);  
}

@keyframes headline {
  100% {
    filter: hue-rotate(45deg);
  }
}


.content1_grid{
text-align: left;
}

.content1_grid p{
margin-top: 10px;
font-size: 0.9em;
}

.content2_grid{
display: grid;
grid-template-columns: 100%;
}

.content2_item_02_grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}

.content2_item_02_grid div{
  display: flex;
  justify-content: center;
  align-items: center;
border: solid 2px #f29600;
border-radius: 16px;
box-sizing: border-box;
background: rgb(255,255,255,0.3);
padding: 25px 3px;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 700;
font-size: 1.0em;
letter-spacing: 0;
color: #f29600;
}
.content3_grid{
display: grid;
grid-template-columns: 55% 1fr;
grid-gap: 0;
text-align: left;
}

/* movieレスポンシブ指定 */
.mov_size {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin: 0;
	
}
.mov_size video {
display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

/* title_spec */
.title_spec {
  display: flex;
  justify-content: center;
  align-items: center;
width: 100%;
height: 70px;
background: #f29600;
box-sizing: border-box;
color: #f2f2f2;
 background-image:
	 repeating-linear-gradient(45deg,rgba(255,255,255,0.1), rgba(255,255,255,0.1) 7px,transparent 0, transparent 14px);
}

.title_spec h3{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 900;
font-size: 1.2em;
letter-spacing: 0;
}


/* spec */
.wrap_E{
width:100%;
box-sizing: border-box;
padding: 30px 50px 0;
background: #f2f2f2;
overflow: hidden;
}

.spec{
display: grid;
grid-template-columns:32% 40% 1fr;
grid-gap: 0;
text-align: left;
max-width: 1060px;
margin: 0 auto;
}

.img_spec{
margin-right: 40px;
}


.img_spec img{
width: 100%;
}

.spec h4{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 700;
font-size: 1.1em;
}

.spec h5{
padding: 10px;
border: solid 1px #222;
margin: 15px 0;
font-weight: 700;
font-size: 1.0em;
}

.spec p{
font-size: 1em;
line-height: 2em;
}

.sub_ill_05{
margin-top: 20px;
}

.note_spec{
font-size: 0.8em;
line-height: 1.0em;
letter-spacing: 0;
margin: 50px auto 100px;
text-align: center;
padding: 10px;
border: dotted 1px #222222;
max-width: 1060px;
}



/* footer */
footer {
	width: 100%;
	height: 70px;
	padding:auto 0;
	color:#f2f2f2;
	text-align: center;
	font-size: 0.8em;
	line-height: 1.5em;
	letter-spacing: 0.05em;
font-weight:500;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
background: #6abf4b;
background-image:url(../img/pattern01c.png);
background-size:30px;
}

footer p{
padding:auto 0;
}

footer a:link { color: #ddd; text-decoration: none; }
footer a:visited { color: #ddd; text-decoration:none; }
footer a:hover { color: #555; text-decoration: none; transition:1s;}
footer a:active { color: #ddd; text-decoration: none; }


/* ページTOPへ戻るボタン */
#back_top{
display: block;
position: fixed;
right: 10px;
bottom: -50px;
font-size: 1.8em;
color: #f2f2f2;
background:#050505;
width: 50px;
height: 50px;
border-radius: 100%;
border: solid 3px #f2f2f2;
line-height: 40px;
text-align: center;
box-sizing: border-box;
cursor:pointer ;
opacity: 0.8;
}

#back_top:hover{
 color: #666;
 transition:0.3s;
}


/* ピッチ調整 */
.mar_t5 {
	margin-top: 5px;
}

.mar_t10 {
	margin-top: 10px;
}

.mar_b10 {
	margin-bottom: 10px;
}

.mar_b15 {
	margin-bottom: 15px;
}

.pad_t10 {
	padding-top: 10px;
}

.pad_t20 {
	padding-top: 20px;
}

.pad_b10 {
	padding-bottom: 10px;
}

.pad_tb10 {
	padding: 10px 0;
}

.pad_tb20 {
	padding: 20px 0;
}


/* スクロールアニメーション */
.fade-in {
  opacity: 0;
  transition-duration: 0.3s, 0.5s;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 100px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-150px, 0);
overflow: hidden;
}

.fade-in-right {
  transform: translate(150px, 0);
overflow: hidden;
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}


/* mailform */
#mail{
width: 100%;

box-sizing: border-box;
}


#mail iframe{
width: 100%;
border: solid 6px #fccf00;
border-radius: 20px;
padding: 20px;
text-align: center;
box-sizing: border-box;
background: #f2f2f2;
}