@charset "UTF-8";


@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/* Thin 100, Light 300, DemiLight 350, Regular 400, Medium 500, Bold 700, Black 900 */
@import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp-noto.min.css);


:root {

	--color-key: #008bab;
	--color-key-light: #4daec4;
	
	--color-yellow: #ffee11;
	--color-sky: #b2dce6;

	--color-gray: #f0f0eb;
	--color-gray-light: #cccccc;
	
	--color-news: #008bab;
	--color-news-light: #b2dce6;
	
	--color-works: #cc0000;
	--color-works-light: #f0b2b2;
	
	--color-media: #ea8700;
	--color-media-light: #f9dbb2;
	
	--color-talk: #669966;
	--color-talk-light: #d1e0d1;
}

.keyColor{ color: var(--color-key);}
.keyColorBg{ background-color: var(--color-key);}



/*
NotoSans
    @import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
    .font_noto{ font-family: 'Noto Sans JP';}

Mplus 1p
    @import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);
    .font_noto{ font-family: 'Mplus 1p';}

Rounded Mplus 1c
    @import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);
    .font_noto{ font-family: 'Rounded Mplus 1c';}

Hannari Min
    @import url(https://fonts.googleapis.com/earlyaccess/hannari.css);
    .font_noto{ font-family: 'Hannari';}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

YakuhanJP : NotoSans Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp-noto.min.css);
    body{  font-family: YakuHanJP_Noto, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}

YakuhanJP : YuGothic Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp-narrow.min.css);
    body{ font-family: YakuHanJP_Narrow, "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;}

YakuhanJP : HiraginoGothic Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp.min.css);
    body{ font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

YakuhanJP : NotoSerif Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp-noto.min.css);
    body{  font-family: YakuHanMP_Noto, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;}

YakuhanJP : YuMin Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp.min.css);
    body{ font-family: YakuHanMP, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;}

YakuhanJP : HiraginoMin Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp.min.css);
    body{ font-family: YakuHanMP, "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", YuMincho, serif;}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

YakuhanJP : M PLUS Rounded 1c Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanrp.min.css);
    body{  font-family: YakuHanRP, "M PLUS Rounded 1c", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;}

*/




/*/////////////////////////
base layout　
//////////////////////////*/
html,body {
	width: 100%;
	font-size: 16px;
	background: #f7f7f7;
}
body {
    font-style: normal;
    font-weight: 300;
	line-height: 2;
    -webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;


font-family: YakuHanJP_Noto,'Noto Sans Japanese' , sans-serif;


	width: 100%;
	text-align: center;
    overflow-y: scroll;
    color: #434343;
    letter-spacing: 0em;
    

    -webkit-overflow-scrolling: touch
}

.en{font-family:'Lato';}

body,a, a:link,a:hover, a:active ,a:visited {

}

body.loadingFinish{}

body.fixed{ overflow-x:hidden; overflow-y: scroll;}
body.fixed #container{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 1;}

html.touchDevice,
.touchDevice body{ font-size: 28px;}


#container{ position:relative; opacity: 0; }


#base{ position:relative;}


a, a:link, a:visited {
	text-decoration: none;
	outline: 0;
	color: inherit;
}
a:hover, a:active {
	text-decoration: none;
}
a.noline, a.noline:link {
	text-decoration: none !important;
}




/* tags
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	padding: 0;
	font-weight: 500;
	margin: 0 auto 20px auto;
	display: block;
	line-height: 1;
}

h1{	font-size: 2.0rem; line-height: 1.3;}
h2{	font-size: 1.6rem;line-height: 1.3;}
h3{	font-size: 1.4rem;line-height: 1.3;}
h4{	font-size: 1.3rem;}
h5{	font-size: 1.2rem;}
h6{	font-size: 1.1rem;}

section{ position: relative;width: 100%; padding:0; margin:0 auto 0px auto;}


p {	margin-bottom: 2em;}
p:last-child{}
p:nth-of-type(1){}

ul{ margin-bottom: 2em;}
ul li{}
li:first-child 		{/* 親の最初にあったら*/}
li:last-child 		{/* 親の最後にあったら*/}
li:nth-of-type(1) 	{/* n番目*/}
li:nth-child(odd) 	{/* 奇数*/}
li:nth-child(even) 	{/* 偶数*/}


button{ border: 0;}


body.menuOpen #globalHeader .menuBtn{ background: #999;  transform: scale(0.8); }
body.menuOpen #globalHeader .menuBtn hr:nth-of-type(1){ transform: translate(-50%,-50%) rotate(-35deg); top: 50%; left: 50%; }
body.menuOpen #globalHeader .menuBtn hr:nth-of-type(2){ transform: translate(-50%,-50%) rotate(35deg); bottom: auto; top: 50%; left: 50%;}
body.menuOpen #globalHeader .menuBtn hr:nth-of-type(3){ opacity: 0; }




/* contents
----------------------------------------------- */

#main  section.area{ min-height: 100vh; padding: 200px 0; display: flex; align-content: center; justify-content: center;}
#main  section.area .contentsFrame{ width: 86%; max-width: 1000px; margin: auto; border: solid 0px #f30}
#main  section:nth-child(even){ background: #000; color: #fff;}
#main  section:nth-child(odd){background: #f7f7f7;}

.sectionHeader{}
.sectionTitle{ font-size: 5rem; margin-bottom: 100px;font-family:'Lato'; font-weight: 300; }

#main  section:nth-child(even) .sectionTitle{ color: #4d4d4d; }
#main  section:nth-child(odd) .sectionTitle{ color: #b3b3b3; }


.sectionBody{}
.sectionBody img{ max-width: 100%; width: 70%; height: auto; margin-bottom: 3rem; pointer-events: none;}	 




.entryStatus{}

.entryBody{ }
.entryBody img{ max-width: 100%; width: 50%; height: auto;}	  
		

#globalFooter{ padding: 5rem 0;
	background: #000;
    color: #fff;
}		
	.copyright{ font-size: 0.8em;}
	.copyright p{ margin-bottom: 2rem; }
	
		
#contactFormWrap{ width: 96%; max-width: 800px; min-height: 800px; }
		


#siteLogo{ position: relative; width: 400px; transform: translate(0%,0%);  cursor: pointer;}
	.touchDevice #siteLogo{ transform: translate(0%,-20%); }
#siteLogo img{ width: 100%; height: auto;}
#siteLogo .guide,#siteLogo .logomain{ visibility: hidden;}
#siteLogo .mark{ position: absolute; top: 0%; left: 50%; transform: translate(-50%,0); width: 58%;
		opacity:0;
		transform-origin: center bottom; 
	
}
#siteLogo .name{position: absolute; bottom: 0; left: 50%;  transform: translate(-50%,0%) scale(1);width: 100%;}
#siteLogo .name_label{ position: absolute; bottom: 0; left: 50%;  transform: translate(-50%,50%) scale(1); opacity: 0; width: 100%;
	transition: all 600ms cubic-bezier(0.33, 1, 0.68, 1);
}
#siteLogo .name_label:nth-of-type(1) { transition-delay: 1300ms;}
#siteLogo .name_label:nth-of-type(2) { transition-delay: 1500ms;}
#siteLogo .name_label:nth-of-type(3) { transition-delay: 1700ms;}


.snsLinks{ position: fixed; top: 1rem; right: 1rem; font-size: 0.9rem;}
.snsLinks ul{ display: grid; grid-template-columns: 1fr 1fr;grid-gap: 1.5rem;}
.snsLinks ul li{ line-height: 1;}
.snsLinks ul li a{}



.snsLinks ul li:nth-of-type(1) {}
.snsLinks ul li:nth-of-type(1) a{}

.snsLinks ul li:nth-of-type(2) {}
.snsLinks ul li:nth-of-type(2) a{}



.loadingFinish #siteLogo  .mark{animation: bound-anim 1.5s forwards 1000ms;}
.loadingFinish #siteLogo  .name_label{ transform: translate(-50%,0) scale(1);opacity: 1;}


.scrollDown{ position: absolute; bottom: 2rem; left: 50%; opacity: 0;transform: translate(-50%,0); width: 5rem; height: 5rem; border: solid 0px #f30; transition: all 500ms ease 3000ms;}


.loadingFinish .scrollDown{ opacity: 1;}

.scrollDown span{ display: inline-block;}

.scrollDown span:after{ content: ''; display: inline-block; border: solid 2px; border-color:#ccc #ccc transparent transparent;  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(135deg); width: 2rem; height: 2rem; }
.loadingFinish .scrollDown span:after{ animation: sdb 1.5s infinite 3000ms;}
		
		
		.touchDevice .scrollDown{bottom:20vw;}
		.touchDevice .scrollDown span:after{ border: solid 4px; border-color:#ccc #ccc transparent transparent; }
		
		
.touchDevice #main  section.area{ padding: 20vw 0; }

.touchDevice .sectionTitle{ font-size: 3rem; margin-bottom: 20vw;}



.touchDevice .sectionBody img{ max-width: 100%; width: 100%; height: auto; margin-bottom: 5vw;}	 

.touchDevice .entryBody{ text-align: left;}
	.touchDevice .entryBody img{ max-width: 100%; width: 100%; height: auto;}	  





.touchDevice .onlySP{ display:inline-block !important;}


@media screen and (max-width:1000px) {

}



@media screen and (max-width:750px) {
   
}
/* ▲ max-width:750px  */





@keyframes arrowdown {
    0% {  bottom: 10px;}
	10% { bottom: 0px;}
	30% {  bottom: 10px;}
	40% {  bottom: 0px;}
	50% {  bottom: 10px;}
	90% {  bottom: 10px;}
	100% {  bottom: 10px;}
}


@keyframes bound-anim {
	0% {top: 18%; opacity:0; transform: translate(-50%,0) scale(1,1);animation-timing-function: ease-in;}
	15% {top: 20%;opacity:1;  transform: translate(-50%,0) scale(1.1,0.85);animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);}
	90% {top: 0%; opacity:1; transform: translate(-50%,0) scale(1);}
	100% {top: 0;opacity:1; transform: translate(-50%,0) scale(1);}
}



@keyframes sdb {
  0% {
     transform: translate(-50%,-50%) rotate(135deg); 
  }
  30% {
     transform: translate(-50%,-10%) rotate(135deg); 
  }

  60% {
     transform: translate(-50%,-50%) rotate(135deg);
  }
}