@charset "UTF-8";

/***********************-
タイトル : wasc
概要：mat

制作日：2026/05
-***********************/

#main header h1 span{  display:  inline-block;}

#main header h1 b{display: inline-block; margin-left: 0.5em;font-family: 'Lato', sans-serif;  font-weight: 600;font-size: var(--fz18); }


#main header nav h2	{
	 margin:1.5em 0 0.5em;font-family: 'Lato', sans-serif;  font-weight: 600; font-size: var(--fz12); padding: 0;
	}
#main header nav h2:before	{
	  display: none; padding: 0; 
	}

#main article h2 {margin:0px 0 0  !important; padding:3px 15px 8px !important;}
#main .footermat  header h1{  display:none;	}



header.mat li{ display: inline-block; margin: 0.2em 2px ; width:calc( 25% - 5px);   }
header.mat li:nth-child(6){ width:calc( 50% - 6px );   }
header.mat li a{ display: block; position: relative; background: #476898; color: #fff; border-radius: 5px; padding: 8px 0 5px 25px; }
header.mat li a span{ display:block;font-family: 'Lato', sans-serif; position: absolute; top: 8px; left:10px;}

header.mat li a:hover,.top header.mat li.top a,.concept header.mat li.concept a,.variation header.mat li.variation a,.outline header.mat li.outline a,.flow header.mat li.flow a,.tryout header.mat li.tryout a,.schedule header.mat li.schedule a{background: #719fd8; }



.googlefont{ font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Lato', sans-serif; }



.mat article,.flow article,.tryout article,.tryout article,.schedule article { margin: 60px auto 80px;}


.mat article p,.flow  article p,.tryout .box p,.schedule  article p{ margin: 1em 0 0 1em !important;}
.schedule  article p{font-size: var(--fz10);}


.mat p.kyocho{ margin: 2em 0 0; font-weight: 600;  font-size: var(--fz12);} 
#mat article ul{ margin: 1em; padding: 0; } 
#mat article ul.list li{ margin:0 0 0.5em 1em;position: relative;  padding-left: 1em; }
#mat article ul.list li:before{
font-family: "Font Awesome 7 Free";
 font-weight: 900;  
position: absolute; top:5px;  left: 0; font-size: 8px;
 content: "\f111"; }



.mat article ul.photo img{  width:100%; height: auto; display: block;} 
.mat article ul.photo li{ display:  inline-block; vertical-align: middle;} 
.mat article.top ul.photo { margin: 0 auto;}
.mat article.top ul.photo li{  width:calc( 50% - 10px); margin:8px 4px; position: relative;} 
.mat article.top ul.photo li h4{  background: rgba( 255,255,255,0.8); top:0; width:105% !important; padding: 0.5em; position: absolute; margin: 0; } 
.mat article.concept dl { margin: 2em 0; display: flex; flex-wrap: wrap; align-content: space-between; width: 100%; }
.mat article.concept dl dt{ font-size: var(--fz12); 
  font-weight: bold;
  background-color: #476898;
  color: #ffffff;
 width: 20%; padding: 1em; margin-bottom: 0.5em; border: solid 1px #476898;
}


.mat article.concept dd {font-size: var(--fz12); 
  position: relative;
width: 80%; padding: 1em;
  border: solid 1px  #476898; margin-bottom: 0.5em;
}
.mat article.concept dd span{
font-size: var(--fz10); }

.mat article.concept dd:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}
.mat article.concept dd:after {
  content: "";
  position: absolute;
  bottom: -28px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid  #476898;
  z-index: 1;
}
.mat article.concept dd:last-child:before,.mat article.concept dd:last-child:after{ display: none;}
.mat article.concept dd h4 { font-size: var(--fz10);margin:  0}


.mat article.concept dd h4 {  display:  inline-block; vertical-align: top;background: #ebf8ff; width:30%; padding: 0.5em}
.mat article.concept dd ul{ margin: 0.5em 0 0 1em ; display:  inline-block;vertical-align: top;width:60%;}
.mat article.concept dd ul li{ margin: 0 0 0.5em; position: relative; padding-left: 1.5em; }

.mat article.concept dd ul p{display:inline-block; vertical-align:top;}
.mat article.concept dd ul span{  position: absolute;left: 0; top:0;   background: #333; color: #fff;  width:1.5em; height: 1.5em; text-align: center; border-radius: 50%; line-height: 1.5;font-size: var(--fz8);}
.mat article.concept dd ul p{ margin: 0 0 0 0.5em !important; line-height: 1; }

.mat article.concept dd div{ background: #fffaf0; padding: 0.2em 0.5em; border-radius: 10px; margin: 1em 0 0 0;}
.mat article.concept dd div ul{margin: 0 0 0 1em ;width:100%;}
.mat article.concept dd div h4{ width:100%; background: none;}

.variation  #maincontents  article.variation h3{ text-align: center;font-size: var(--fz10); padding: 0;}
.variation  #maincontents article.variation h3:before{  display: none;}

.mat article.outline h4.outline { margin: 1em 1em 0;background: #1a365d; color: #fff; padding: 8px;  font-size: var(--fz12); border-radius: 10px 10px 0 0;  }
.mat article.outline  dl{   margin: 0 1em 4em ;  }

.mat article.outline  dl dt,.mat article.outline  dl dd{ display:  inline-block; vertical-align: top; margin: 0 ; padding:15px 0.5em; border-bottom: 1px solid #000; }
.mat article.outline  dl dt{ width:9em;}
.mat article.outline  dl dd{ width: calc( 100% - 9.5em); }





/*流れ*/
.flow .flow h3 { margin: 0.5em 0 0 1em !important;
background: #e8f1f9;  position: relative; height: 35px; 
}
.flow .flow h3:before{ display: none;}
.flow .flow h3 span{ position: absolute; left:0;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  width: 35px;
  height:  35px;
  line-height: 35px;
  text-align: center;
background: #476898; 
}
.flow h3 b{ display: block; position: absolute; left:3em; top:50%; transform: translateY(-50%); font-weight: 400;font-size: var(--fz10);}
.flow article.flow p.flowp{ margin: 1em 0 2em 1.5em !important;  padding: 0;}
.flow  article.flow .nokori p{ margin: 1em 0 2em 1.5em !important;  padding: 0;}
.flow .nokori .photo { margin: 1em 0 2em 1em !important;  padding: 0;}
.flow .nokori .photo li,.flow .tachiagari .photo2  li{   display:inline-block;  vertical-align:top;}
.flow .nokori .photo li h4,.flow .tachiagari .photo2 li h4{  font-weight: normal;}

.flow .nokori .photo li img{ width:auto; height: 300px; }
.flow .uchidome .photo li,.flow .tachiagari .photo li { width: calc( 50% - 15px); margin: 0 5px 20px; }
.flow .uchidome .photo li img{ width:100%; height: auto; }
.flow .tachiagari .photo2 li img{ width:auto; height: 300px; }
.flow .tachiagari .photo2{ margin: 2em auto; text-align: center;}
.flow .tachiagari .photo li img{ width:100%; height: auto; }

.tryout p.hight{ margin: 1em;font-size: var(--fz10);}
.tryout .box h4 {   font-weight: normal; margin: 1em 0; position: relative; font-size: var(--fz12); padding-left: 1.2em}
.tryout .box h4:before{
font-family: "Font Awesome 7 Free";
 font-weight: 900;  
position: absolute; top:50%; transform: translateY(-50%); left: 0;  font-size: 14px;
 content: "\f0c8"; }



.tryout .box ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;

}
.tryout .box ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em; margin-bottom: 0.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

.tryout .box ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #476898;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 14px;
  border-radius: 50%;
  left: 5px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 8px;
}
.tryout .box ol li h4 { border: none;  border-bottom: 1px solid #476898;  font-weight: normal; margin:0 0 0.5em; width:95%; max-width: 20em;}
.tryout .box ol li h4:before{ display: none;}
.tryout .box h4.photo {  margin:2em 0 1em; text-align: center; border: none;}
.tryout .box h4.photo2 {  margin:0em 0 2em; text-align: center; border: none;font-size: var(--fz8);}
.tryout .box h4.photo2:before,.tryout .box h4.photo:before {  display: none;}
.tryout .box h5 { font-size: var(--fz8);}




.tryout .box .photo  li{   display:inline-block;  vertical-align:top; text-align: center;}
.tryout .box .photo  img{ width:100%; height:auto; }
.tryout .box .photo li { width: calc( 100% / 3 - 15px); margin: 0 5px 20px; }
.tryout .box .photo li h5,.tryout .box div.photo h5 ,.tryout .box div.photo3 h5 {  border: none; font-weight: normal; text-align: center;}
.tryout .box  dl {   margin: 1em; display: flex; flex-wrap: wrap }
.tryout .box  dl dt,.tryout .box  dl dd { padding: 0.5em; }
.tryout .box  dl dt { width:5em; }
.tryout .box  dl dd { width:calc( 100% - 7em); display: flex; flex-wrap: wrap;}


.tryout .box  dl dd span { width:8em; }
.tryout .box  dl dd b  { width:calc( 100% - 9em)	; font-weight: normal;}
.tryout .box  dl dd span,.tryout .box  dl dd b  { padding: 0 0.5em 0.3em; border-bottom: 1px dotted #999;}
.tryout .box  dl dd span:not(:first-child),.tryout .box  dl dd b:not(:nth-of-type(1)){ padding: 0.3em 0.5em 0.3em; }



.tryout .box div.photo,.tryout .box div.photo3 { margin:4em auto 3em ; text-align: center; border: none;}
.tryout .box div.photo img{  width: 100%; height:auto; display:block; margin: 5px auto 10px;}
.tryout .box div.photo img:nth-child(2){  width: 100%; height:auto;  max-width: 500px;}
.tryout .box div.photo.zu7 img:nth-child(2){  width: 100%; height:auto;  max-width: 100%;}

.tryout .box div.photo3 img{  width: 95%; height:auto; max-width: 500px; display:block; margin: 5px auto;}
.tryout .box.no04 .photo li { width: calc( 100%  - 15px); margin: 0 auto 20px; }
.tryout .box.no04 .photo li img{  width: 100%; height:auto; display:block; margin: 5px auto 10px;}
.tryout .box.no04 .photo li:nth-child(2) img{  width: 100%; height:auto;  max-width: 450px;}



.schedule dl {   margin: 1em;border-bottom: 1px dotted #999; }
.schedule  dl dt,.schedule  dl dd {  display:inline-block;  vertical-align:top; border-top: 1px dotted #999; padding: 0.5em 0;}
.schedule  dl dt { width:7em; }
.schedule  dl dt span { display: block; font-size: 12px;}
.schedule   dl dd { width:calc( 100% - 7em)	;}



@media (max-width: 643px) {

#main header h1 span{ font-size: 22px; }
#main header h1 b{font-size: 26px;}
#main header nav h2	{font-size: 22px!important;}

header.mat li,header.mat li:nth-child(6){ display: block; margin: 0.5em 5px ; width:95%;   }
header.mat li a,.footermat header.mat li a{text-align: center;height: auto; padding: 8px 0 5px 30px; text-align: left; position: relative;}

	.flow .nokori .photo li img{ width:100%; height:auto; }
	
	
	
.schedule  dl dt,.schedule  dl dd {  display:block; border-top: 1px dotted #999; padding: 0.5em 0;width:95%; margin: 0 auto}
.schedule  dl dt span { display:inline-block; font-size: 12px;}


}
@media (max-width: 500px) {
	
}