@charset "UTF-8";
/* CSS Document */

body{ background-color: #18216e;
color: #fff;
 font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;font-weight: bold;

background-image: url("img/bg.png"); background-size: 100%; background-repeat: repeat-y; background-position: center 140px;

	}

a{cursor: pointer; color: rgba(21,72,145,1.00);}
a:hover{ color: rgba(3,25,126,0.5);}

a img:hover{ opacity: 0.7;}


img{ /* SPの長押し禁止 */
	    -webkit-touch-callout:none;
	    -webkit-user-select:none;
	    -moz-touch-callout:none;
	    -moz-user-select:none;
	    user-select:none;
		}
		
.sp,
.br500{ display:none;}


@media print {#fp-wrap{display:none;}}

.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}


.noto-serif-jp {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

#main{
    width: 100%; text-align: center;
    margin: 0 auto; max-width: 1100px;
   
	
}
h1,
h2{ color: #fff; text-align: center; line-height: 120%;}

h1{ font-size: 50px; margin:60px auto 40px;font-weight: bold;
font-family: "Noto Serif JP", serif; font-optical-sizing: auto;  text-shadow: 2px 3px 3px rgba(136, 136, 136, 0.74);}

h2{ font-size: 28px; margin: 10px auto 30px;font-weight: bold; letter-spacing: 1.7;
 font-family: "Noto Sans JP", sans-serif;  font-optical-sizing: auto;  text-shadow: 2px 3px 3px rgba(136, 136, 136, 0.74);}
 
 .mainimg{width: 90%; max-width: 700px;}
 
 .eshop{ background-color: #fff; border-radius:40px; font-size: 30px; font-weight: bold; padding: 20px 30px; 
 margin: 100px auto; text-align: center;width: fit-content;color: #18216e; line-height: 150%;}
 
  .eshop a{ display: inline-block; background-color: #1E4F9A; color: #fff; margin: 15px auto 0; padding: 11px 20px 15px; border-radius: 30px;}
  .eshop a:hover{ background-color: rgba(105,128,158,1.00);}
  
  
.box27 img{ width: 500px;} 
.box27 {
    position: relative; width:75%;
    margin: 150px auto 30px;
     border: 1px solid #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box27 .box-title {font-family: "Noto Serif JP", serif;
    position: absolute;border: 1px solid #fff;
    display: inline-block; 
    top: -58px;
    left: -3px;
    padding: 10px 20px;
    line-height: 36px;
    font-size: 30px;
    background:  #18216e;
    color: #ffffff;
    font-weight: bold; /*border: 1px solid #fff;*/
    border-radius: 5px 5px 0 0; 
}

.box27 .box27in {
    margin: 0; color: #18216e; font-size: 24px; font-weight: bold;
    padding: 1em 1em 1.5em; background: #fff;border: 1px solid #fff;
}

.boxin{ display: flex; margin: 25px auto;width: fit-content; max-width: 1000px;}


.youtube {
  width: 100%; margin: 20px auto; max-width: 600px;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}



.box30:first-child { width: 550px;}
.box30:last-child { width: 250px;}

.box30 { 
    margin: 2em 1.5em; border: 1px solid #fff;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 span{ display: none;}

.box30 .box-title {font-family: "Noto Serif JP", serif;
    font-size: 1.2em;
    background: #18216e;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box30 p {
    padding: 15px 20px; font-size: 16px; line-height: 220%;
    margin: 0; color: #18216e; text-align: center;
}
.box30 table {
    margin:20px 10px; color: #18216e;  line-height: 130%;}
.box30 table tr{}
.box30 table tr td{text-align: left; padding: 7px 10px 7px 0; font-size: 15px; line-height: 150%;}

.box30 table tr td:first-child span{display: inline-block;
font-size: 12px; text-align: center;width: 55px; color: #fff; background-color: #18216e; 
padding: 3px 5px 4.5px; border-radius: 20px;}

.box30 table tr td span{}
.box30 table a{display: inline-block;}

.cresit{ display: block; margin: 30px auto 100px;text-align: center;}
.cresit p{text-align: left; display: inline-block;}



@media screen and (max-width: 1000px) {
 .box27 p { font-size: 22px;}

}

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

.pc{ display:none;}
.sp{ display:inline;}

 .eshop{  font-size: 28px; padding: 20px 30px 30px; line-height: 130%;margin: 100px auto ; }
 
 .box27 {  margin: 150px auto;}
 .box27 .box27in { font-size: 20px;line-height: 130%;}

.boxin{ display: block;margin: 0 auto;width: 550px;}
.boxin::after { content: " "; display: block; clear: both;}

.box30 span{ display: inline-block;}
.box30{ margin: 30px 0;}

.box30:first-child,
.box30:last-child { width: 550px;float: none;}

.box30:last-child{margin: 30px 0 100px;}

.box30 p {text-align: left;}
}

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

body{ background-size: 200%;}
h1{ font-size: 40px; }

 .eshop{  width: 90%;padding: 20px 0px;  font-size: 22px;}

.box27 img{ width: 90%;position: static;} 
.box27 {width:90%;}


.box30 table { margin:20px 20px; }
	
.box30 table tr td,
.box30 table tr td:first-child{display: block; width: 100%; text-align: left;}

.boxin{ width: 90%;}

.box30:first-child,
.box30:last-child { width:100%;}

}


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

h1{ font-size: 34px; }
h2{ font-size: 25px; }

.box27 .box-title {
    top: -53px;
    left: -3px;
    line-height: 30px;
    font-size: 26px;}

.box27 .box27in {font-size: 18px;}

.box30 table a{ margin: 15px auto;}

}

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

}

@media screen and (max-width: 500px) {
.br500{display:inline-block;}

.box27 .box-title {
    top: -53px;
    left: 7px;
    line-height: 30px;
    font-size: 22px;}

.box27 .box27in {font-size: 16px;}
.box27 img{ width: 100%; margin: 15px 0;} 

.cresit{ display: block; margin: 0px auto 100px;text-align: center;}

}


/* animate delay*/
.animate__delay-01s {animation-delay: calc(var(--animate-delay) * 0.1);}
.animate__delay-02s {animation-delay: calc(var(--animate-delay) * 0.2);}
.animate__delay-03s {animation-delay: calc(var(--animate-delay) * 0.3);}
.animate__delay-04s {animation-delay: calc(var(--animate-delay) * 0.4);}
.animate__delay-05s {animation-delay: calc(var(--animate-delay) * 0.5);}
.animate__delay-06s {animation-delay: calc(var(--animate-delay) * 0.6);}
.animate__delay-07s {animation-delay: calc(var(--animate-delay) * 0.7);}
.animate__delay-08s {animation-delay: calc(var(--animate-delay) * 0.8);}
.animate__delay-09s {animation-delay: calc(var(--animate-delay) * 0.9);}
.animate__delay-10s {animation-delay: calc(var(--animate-delay) * 1.0);}
.animate__delay-15s {animation-delay: calc(var(--animate-delay) * 1.5);}