@charset "utf-8";
/* CSS Document */
@import url("https://use.typekit.net/buk2sns.css");
/*ブラウザクリア*/
body{
margin: 0px;
}

ul {
display: block;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
}

p {
display: block;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

h2 {
display: block;
font-size: 0em;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
figure {
display: block;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
/*ブラウザクリア*/

#W75{
width:100%;
background: #fff;
text-align: center;
margin: 0 auto;
font-size:1em;
overflow: hidden;
font-family: 'Noto Sans JP', sans-serif;
-webkit-font-smoothing: antialiased;
color: #000;
}

#W75 .inner{
width: 90%;
max-width: 1200px;
text-align: center;
margin: 0 auto;
font-size:1em;
padding-bottom: 0px;
overflow: hidden;
padding-top:0px;	
}
#W75 a:hover{
opacity: .5;
transition: .6s;
}


/***** main *****/
#main{
width: 100%;
max-width: 1200px;
margin: 150px auto;
}
#main img{
display: block;
margin: 0 auto;
width: 80%;
}
/***** main *****/

/***** lead *****/
#lead{
width: 90%;
max-width: 1200px;
margin: 250px auto 0;
}
#lead h2{
font-family: futura-pt, sans-serif;
font-size: 3rem;
color: #000;
display: block;
text-align: center;
padding-bottom: 60px;
}
#lead p{
font-size: 1.3rem;
line-height: 2;
text-align: center;
}
/***** lead *****/

/***** youtube *****/
#movie{
width: 100%;
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
margin: 100px auto;
}
#movie .video{
bottom: 0;
left: 0;
overflow: hidden;
right: 0;
top: 0;
}
#movie .video iframe{
box-sizing: border-box;
height: 56.25vw;
left: 50%;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 177.77777778vh;
}
/***** youtube *****/

/***** contents *****/
#contents_wrapper{
width: 90%;
max-width: 1200px;
margin: 100px auto 200px;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: flex-start;
}
#contents_wrapper a:hover{
opacity: 1;
}
#contents_wrapper h3{
font-family: futura-pt, sans-serif;
font-size: 2rem;
}
#contents_wrapper .box{
width: 33.3%;
margin-bottom: 50px;
}
#contents_wrapper .box-in{
width: 95%;
margin: 0 auto;
}
#contents_wrapper .text{
margin-top: 10px;
}
#contents_wrapper .text p{
text-align: justify;
font-size: 1rem;
margin-top: 10px;
}

#contents_wrapper .image_box {
width: 100%;
display: block;
}

#contents_wrapper .hover {
position: relative;
}
#contents_wrapper .hover img {
position: relative;
display: block;
width: 100%;
transition: 0.3s;
}
#contents_wrapper .hover figcaption {
opacity: 0;
transition: 0.6s;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #fff;
}
#contents_wrapper .hover figcaption .txt_box {
position: relative;
width: 100%;
height: 100%;
}
#contents_wrapper .hover figcaption .txt_box h3 {
width: 100%;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#contents_wrapper .hover:hover figure img {
filter: brightness(60%);
}
#contents_wrapper .hover:hover figure figcaption {
opacity: 1;
}
/***** contents *****/


/*****fade*****/
.sa {
opacity: 0;
transition: all .8s ease;
}
.sa.show {
opacity: 1;
transform: none;
}
.sa--lr {transform: translate(-100px, 0);}
.sa--rl {transform: translate(100px, 0);}
.sa--up {transform: translate(0, 100px);}
.sa--down {transform: translate(0, -100px);}
.sa--scaleUp {transform: scale(.5);}
.sa--scaleDown {transform: scale(1.5);}
.sa--rotateL {transform: rotate(180deg);}
.sa--rotateR {transform: rotate(-180deg);}
/*****fade*****/

/********オーダー**********/
.order1{order: 1}
.order2{order: 2}
/********オーダー**********/


.pc { display: block !important; }
.sp { display: none !important; }
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }


/***** main *****/
#main{
margin: 0 auto;
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
/***** main *****/

/***** lead *****/
#lead{
margin: 0 auto 0;
}
#lead h2{
font-size: 3rem;
}
#lead p{
font-size: 1rem;
line-height: 2;
text-align: justify;
}
/***** lead *****/

/***** contents *****/
#contents_wrapper{
width: 90%;
}
#contents_wrapper h3{
font-size: 1.4rem;
}
#contents_wrapper .box{
width: 50%;
margin-bottom: 50px;
}
#contents_wrapper .box-in{
width: 90%;
margin: 0 auto;
}
#contents_wrapper .text{
margin-top: 10px;
}
#contents_wrapper .text p{
font-size: .8rem;
margin-top: 10px;
}
/***** contents *****/

}