@charset "utf-8";
/*@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');*/

/* notofont import */
@impFort url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap");
/* font style */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap");

/* RESET
----------------------------------------------------------------------------------------------------*/
abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,caption,canvas,center,cite,code,dd,del,details,dfn,dialog,dl,dt,em,embed,fieldset,figcaption,figure,form,footer,header,hgroup,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,pre,q,ruby,s,samp,section,main,small,span,strike,sub,summary,sup,tt,table,tbody,tfoot,thead,time,tr,th,td,u,ul,var,video{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;white-space:normal;margin:0;padding:0;border:0;outline:0;line-height:1.6;text-align:left;}textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1.6;text-align:left}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}table{border-collapse:collapse;border-spacing:0}

/* ----------------------------------------------

 * 設定をしなおす

---------------------------------------------- */
body {
  margin: 0 auto;
  padding: 0;
  font-size: 15px !important;
  line-height: 1.6 !important;
  /*font-family: 'Roboto',"游ゴシック Medium", "Yu Gothic Medium","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;*/
  font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "HGゴシックE", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: unset;
  font-weight:normal;
  color: #222;
  -webkit-text-size-adjust: 100%;
  
 
}

body:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  /*background-image: url(../img/body_bg.jpg);*/
  background-position:bottom center;
  
}

html{
	scroll-padding-top:180px; /*ヘッダー固定の位置調整*/
	scroll-margin-top:180px; 
}

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

html{
	scroll-padding-top:50px; /*ヘッダー固定の位置調整*/
	scroll-margin-top:50px; 
}
}

a:link { color: #0066CC; text-decoration: none; }
a:visited { color: #0066CC; text-decoration: none; }
a:active { color: #0066CC; text-decoration: none; }
a:hover { color: #3AAFFF; text-decoration: underline; }

a:hover img {
  /*opacity: .75;*/
}

b {font-weight:bold !important;}
strong {
  background: linear-gradient(transparent 0, yellow 0);
}

p{line-height:1.6;}
.class_new { color: #FF0000;}
.class_cancel { color: #009966; }
.class_end { color: #993333;}


hr{
width:15%; border:2px solid #BBB;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;	
}

img.waku_maru{
  border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;		
}

#nav2 .btn1 {
	width:220px;
	height:55px !important;
  display:inline-block;
  margin:20px 4px 0 4px !important;
  color: #222;
  font-size:120%;
  line-height:52px;
  font-weight:bold;
  text-align:center;
  vertical-align:middle;
  transition-duration: 0.3s;
  -webkit-border-radius:40px;-moz-border-radius:40px;border-radius:40px;background-color: #FFF;
	background-color:#fff20a;
   padding:auto ;
   padding-left:12px;
   box-shadow: 2px 2px 0px 0 #BFBE28;
   
}

#nav2 .btn1 i {
  margin-left:10px;
}


#nav2 .btn1:hover {
  background-color:#FFFF99;
  box-shadow:none;
}

#nav2 .btn2 {
	width:220px;
	height:55px !important;
  display:inline-block;
  margin:20px 4px 0 4px !important;
  color: #222;
  font-size:120%;
  line-height:52px;
  font-weight:bold;
  text-align:center;
  vertical-align:middle;
  transition-duration: 0.3s;
  -webkit-border-radius:40px;-moz-border-radius:40px;border-radius:40px;background-color: #FFF;
	background-color:#78E5E5;
    padding:auto ;
	padding-left:12px;
   box-shadow: 2px 2px 0px 0 #62BABC;
}

#nav2 .btn2 i {
  margin-left:10px;
}

#nav2 .btn2:hover {
  background-color:#85FDFF;
  box-shadow:none;
}


#nav2 .btn3 {
  width:220px;
	height:55px !important;
  display:inline-block;
  margin:20px 4px 0 4px !important;
  color: #222;
  font-size:120%;
  line-height:52px;
  font-weight:bold;
  text-align:center;
  vertical-align:middle;
  transition-duration: 0.3s;
  -webkit-border-radius:40px;-moz-border-radius:40px;border-radius:40px;background-color: #FFF;
	background-color:#FFCC33;
    padding:auto ;
	padding-left:12px;
   box-shadow: 2px 2px 0px 0 #C69F2A;
}

#nav2 .btn3 i {
  margin-left:10px;
}

#nav2 .btn3:hover {
  background-color:#FFE452;
  box-shadow:none;
}



#nav2 .btn4 {
  width:260px;
	height:55px !important;
  display:inline-block;
  margin:20px 4px 0 4px !important;
  color: #222;
  font-size:120%;
  line-height:52px;
  font-weight:bold;
  text-align:center;
  vertical-align:middle;
  transition-duration: 0.3s;
  -webkit-border-radius:40px;-moz-border-radius:40px;border-radius:40px;background-color: #FFF;
	background-color:#FFCCCC;
    padding:auto ;
	padding-left:12px;
   box-shadow: 2px 2px 0px 0 #DC8D9B;
}

#nav2 .btn4 i {
  margin-left:10px;
}

#nav2 .btn4:hover {
  background-color:#FFE5E5;
  box-shadow:none;
}






  .container {
	width:100%;
    max-width: 1200px;
	padding: 0;
	margin:0 auto;
	
  }

@media only screen and ( max-width : 1199px ) {
  .container {
    padding: 0 auto;
  }
}

@media only screen and ( max-width : 480px ) {
  .container {
    padding: 0 auto;
  }
  
  
}
@media only screen and ( max-width : 374px ) {
  .container {
    padding: 0 auto;
  }
}




@media only screen and ( max-width : 1499px ) {
	
#nav2 .btn1 {
	width:180px;
	margin:20px 2px 0 2px !important;
  font-size:110%;
}



#nav2 .btn2 {
	width:180px;
	margin:20px 2px 0 2px !important;
  font-size:110%;
}

#nav2 .btn3 {
  width:180px;
  margin:20px 2px 0 2px !important;
  font-size:110%;
}

#nav2 .btn4 {
  width:220px;
  margin:20px 2px 0 2px !important;
  font-size:110%;
}

}

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




 
  #nav2 ul{ 
	position:absolute;
	
	top:0 !important;
	text-align:right;
	right:5px;
 } 
 
 


  main {
  position:relative;
  top:0;
  left:0;
  width: 100%;
  background:rgba(255,255,255,0);
  padding:0;
  text-align:center;
  }
  
  main p {
  word-break: break-all;
}
  

}

  .pc_block { display: block;!important; margin:0;}
  .mobile_block { display:none;}
  
  
 

  #logo_header{
	  height:100px;
	  z-index: 100;
  width: 100%;
  position: fixed;
	background-color:rgba(0,0,0,0);
	font-weight:bold !important;
	  
  }
  
  #logo_header.topscroll{
    background-color:rgba(255,255,255,1) !important;
	/* -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all  0.7s ease;*/
}
  
  #logo_header h1 {
	position:relative;
	font-size:12px;
	line-height:120%;
	text-align:left;
	font-weight:normal;
	color:#006666;
	top:5px;
	left:5px;
	
	
}
  
.logo img {
    width: auto;
	height:60px;
	position:relative;
	float:left;
	top:20px;
	left:25px;
	z-index: 110;
	
  }
  
     #logo_header h1 {
	position:absolute;
	width: auto;
	top:34px;
	left:350px;
	margin:0;
	font-size:1.2em;
	line-height:1;
	text-align:left;
	font-weight:normal;
	color:#222 !important;
  }
     #logo_header h1 b {

	font-weight:bold;
	color:#FF0000 !important;
  }

  
  #logo_header #nav2 ul li{ 	
    display: inline;
		
 } 
 
  #logo_header #nav2 ul { 
	width:auto;
	margin:5px 120px 0 250px;
	position:relative;
	text-align:right;

 } 

  

  
  main {
  position:relative;
  top:0px;
  left:0px;
  width: 100%;
  background:rgba(255,255,255,0);
  padding:0;
  text-align:center;
  }
  
  main p {
  word-break: break-all;
}

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



  

     #logo_header h1 {
	position:absolute;
	width: auto;
	top:7px;
	left:20px;
	margin:0;
	font-size:.9em;
	text-align:left;
	font-weight:normal;
  }
  
       #logo_header h1 b {

	font-size:0 !important;
  }


.logo img {
    width: auto;
	height:50px;
    position:fixed;
    top: 35px;
    left: 20px;
    z-index: 110!important;
  }
  


}

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


  #logo_header{
	  height:70px;
	  z-index: 100;
  width: 100%;
	  
  }

  
     #logo_header h1 {
	position:absolute;
	width: auto;
	top:6px;
	left:20px;
	margin:0;
	font-size:.7em;
	text-align:left;
	font-weight:normal;
  }
  


.logo img {
    width: auto;
	height:40px;
    top: 23px;
    left: 20px;
    z-index: 110!important;
  }
  
  
    #logo_header #nav2 ul { 
	display:none;

 } 
 
 


}

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

#nav2 .btn1,#nav2 .btn2,#nav2 .btn3,#nav2 .btn4{padding:7px 0 7px 0 !important;font-size:60%; width:55px!important;margin-top:20px !important; }

}

@media screen and (max-width: 400px) {
	
     #logo_header h1 {

	font-size:.6em;
  }
  


.logo img {
    width: auto;
	height:32px;
    top: 23px;
    left: 20px;
    z-index: 110!important;
  }
  

}



.main_per{ width:100%; margin:10px 0; padding:1em;display:inline-block; position:relative; }

.per_box{ font-size:0;line-height:1.2;font-weight:normal; text-align:center; margin:10px 10px 80px 10px; padding:0 1em 10px 1em ; display:inline-block;width:calc( 49% - 20px );border-radius: 15px;
vertical-align:top; position:relative; box-shadow: 2px 2px 15px #888;}

@media screen and (max-width: 680px) {
.per_box{display:block;width:calc(100% - 60px );margin:20px 30px 40px 30px;;}

}

@media only print{

  #logo_header{
  position: absolute;
	  
  }
  .logo img {
    position:absolute;
  }
  

}
  
  
@media (min-width: 568px) {
a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
}
}

ol.type1 li {
  list-style-type: none;
  padding:0 0 0 1em;
  counter-increment: cnt1;
}

ol.type1 li::before {
  content: ""counter(cnt1)"．";
}

ol.type2 li {
  list-style-type: none;
  padding:0 0 0 1em;
  counter-increment: cnt2;
}

ol.type2 li::before {
  content: "（"counter(cnt2)"）";
}

.youtube_waku {
  width: 100%;
  max-width:560px;
  border:2px solid #CCC;
  margin-bottom:40px;
}
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.class_new{color:#FF0000;}
.class_end{color:#CC0000;}
.class_cancel{color:#009999;}

/* 「ルビを外す」状態 */
body.ruby-off ruby rt {
    display: none;
}

/* ルビを外しても文字位置がおかしくならないようにする */
body.ruby-off ruby {
    ruby-position: over;
}