body {
  font-family:"Century Gothic", sans-serif;
  	margin-left: 30px;
	margin-top: 30px;
	margin-right: 30px;
	margin-bottom: 15px;
	padding: 60px 10px 50px; /* bodyの内側余白を指定する(上:右:下:左) */
	background-color:#EFEFEF;
}

.youtube {
  width: 60%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

.rogo{
	position: absolute;
	top: 0;
	left: 0;
	padding: 25px 0 15px 30px;
	width: 157px;
}
.rogo img{
	width: 100%;
	height: auto;
}
.fix_menu{
	position: fixed;
	width: 95%;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 999;
	padding: 30px;
	background-color:#FFFFFF;
}
#navwrap{
	position: absolute;
	top: 0;
	right: 0;
	padding: 25px 30px 15px 0;
}

.header_menu{
	display: flex;
}

  .wrapper {
    max-width: 95%;
    margin: auto;
	 padding: 10px;
    text-align: center;
	 background: #FFFFFF;
  }

  .wrapper-left {
    max-width: 100%;
    margin: auto;
	 padding: 10px;
    text-align: left;
	
  }

.inline-block {
    display: inline-block;      /* インラインブロック要素にする */
	background-color:white;/* 背景色指定 */
	padding:  15px;             /* 余白指定 */
	margin:20px;
	width:300px;	            /* 幅指定 */
    height: 560px;              /* 高さ指定 */
    
}
.inline-block-small {
    display: inline-block;      /* インラインブロック要素にする */
	background-color:white;/* 背景色指定 */
	padding:  15px;             /* 余白指定 */
	margin:20px;
	width:400px;	            /* 幅指定 */
    height: 300px;              /* 高さ指定 */
    
}

.inline-block-long {
    display: inline-block;      /* インラインブロック要素にする */
	background-color:white;/* 背景色指定 */
	padding:  15px;             /* 余白指定 */
	margin:20px;
	width:300px;	            /* 幅指定 */
    height: 500px;              /* 高さ指定 */
    
}

.inline-block-wide {
    display: inline-block;      /* インラインブロック要素にする */
	background-color:white;/* 背景色指定 */
	padding:  15px;             /* 余白指定 */
	margin:20px;
	width:500px;	            /* 幅指定 */
    height: 550px;              /* 高さ指定 */
    
}

ul{
	list-style: none;
	display: flex;
	text-align: center;
	justify-content: center;
	margin:0;
}

li{
	list-style: none;
	display: flex;
	justify-content: center;
	margin:0;
}
.ul, .ol {
  padding: 10px;
	display: block;
}

.ul .li {
  position: relative;
  list-style-type: none!important;/*ポチ消す*/
  padding: 0.5em 0.5em 0.5em 0.5em;
  margin-bottom: 5px;
  line-height: 1.5;
  background: #dbebf8;
  vertical-align: middle;
  color: #505050;
  border-radius: 15px 0px 0px 15px;/*左側の角丸く*/
 display:block;
	text-align: left;

}

.ul .li:before{ 
  display:inline-block; 
  vertical-align: middle;
  /*以下白丸つくる*/
  content:'';
  width:1em;
  height: 1em;
  background: #fff;
  border-radius: 50%;
  margin-right: 8px;
}


.header_menu li a{
	top:0;
	margin: 0;
	cursor: pointer;
	padding: 0 10px;
	text-decoration: none;
	z-index: 9999;
	height: 50px;
}



.footer01 {
 color: #808080;
 background: #e5e5e5;
 padding: 30px;
}
.footer01 a {
 color: #808080;
 text-decoration: none;
}
.footer01 a:hover {
 text-decoration: underline;
}
.footer01 .menu {
 margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 flex-wrap: wrap;
}
.footer01 .menu li {
 margin: 0;
 padding: 0 20px 0 0;
}
.footer01 .copyright {
 margin: 0;
 padding: 20px 0 0 0;
}




#switch{
	display: none;
}
.main p{
	padding: 500px 0;
	text-align: center;
}




.clearfix:after {
content: "";
display: block;
clear: both;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display:flex !important;
width: 80%; }
.pc2 { display:flex !important;
width: 100%;
margin: 10px;}
.pc3 { display:flex !important;
	width: 40%;}
.pc4 {display:inline-block;
	}
.sp { display: none !important; }
.sp2 { display: none !important; }
.sp3 { display: none !important; }


	h1,h2,h3,h4,h5{
	font-family: "Century Gothic", sans-serif;
	font-weight: bold;
}

h1 {font-size:150%;
color:#FFFFFF;
}

h2 {
	/*線の種類（実線） 太さ 色*/
  border-bottom: solid 3px;
	color:#666666;
	font-size: 1.5em;
}

h3 {
  position: relative;
  padding: 5px 5px 5px 5px;
  background: #77c3df;
  font-size: 20px;
  color: white;
  margin-left: -33px;
  line-height: 1.3;
  z-index:-1;
}

 .small{
	 font-size:1.2em;
}
.ssmall{
	 font-size:1.0em;
}

h4 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

h4:before, h4:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 50px;
  height: 1px;
  background-color: black;
}

h4:before {
  left:0;
}
h4:after {
  right: 0;
}


h6 {
	color: #FFFFFF;
	font-size: 80%;
}




@media screen and (max-width:768px) {
	#switch ~ label {
		padding: 12px 12px;
		width: 60px;
		height: 60px;
		background: #333;
		position: fixed;
		box-sizing: border-box;
		top: 0;
		right: 0;
		z-index: 999;
		cursor: pointer;
	}
	#switch ~ label span{
		display: block;
		width:22px;
		height:2px;
		top: 50%;
		left: 0;
		right: 0;
		margin:auto;
		background: #fff;
		position: absolute;
		-webkit-transition: 0.2s transform;
		transition: 0.2s transform;
	}
	#switch ~ label span:before,
	#switch ~ label span:after{
		content: "";
		display: block;
		background: #fff;
		position: absolute;
		width:22px;
		height:2px;
		left: 0;
		right: 0;
		margin: auto;
	}
	#switch ~ label span:before{
		top: -9px;
	}
	#switch ~ label span:after{
		top: 9px;
	}
	#navwrap{
		padding-top: 0;
		position: fixed;
		top: -100%;
		left: 0;
		width: calc(100% - 60px);
		height: 100%;
		background: rgba(0,0,0,0.8);
		transition: all 0.4s;
		padding: 60px;
		box-sizing: border-box;
	}
	#switch:checked ~ #navwrap { 
		display: block; 
		top: 0;
	}
	.header_menu{
		display: flex;
		flex-direction: column;
	}
	.header_menu li{
		margin: 0 auto 30px;
	}
	.header_menu li a{
		color: #fff;
	}
	.scroll-prevent {
		position: fixed;
		z-index: -1;
		width: 100%;
		height: 100%;
	}
	
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
 .pc { display: none !important; }
	.pc2 {display: none !important;}
	.pc3 {display: none !important;}
	.pc4 {display: none !important;}
 .sp { display: block !important; 
	 width:100%;}
 .sp2 { display: block !important; 
	 width:300px;
	margin: auto;}
.sp3 { display: block !important;
	width:80%;
	 }

 }