@charset "utf-8";

/*==============================
INITIALIZE
===============================*/
html { overflow-y: scroll; }

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
input,
p,
address,
a,
img {
margin: 0;
padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 { font-size: 100%; }

img { border: 0; }

p {
line-height: 1.8;

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

}

hr { display: none; }

table {
border-collapse: collapse;
border-spacing: 0;
_font-size: 100%;
}

li {
list-style-type: disc;
margin-left: 10px;
}

h1 { margin-bottom:30px; }
h2 { margin-bottom:30px; }

#leed { margin-bottom:20px; }
#sponsor { margin-bottom:30px; }

#logo {
text-align:center;
margin:30px 0;
}
#logo a {
margin: 0 30px;
}
.txtcenter {
text-align: center;
}

#credit { text-align:center; }

/*==============================
LINK
===============================*/
a:link,
a:visited,
a:active { text-decoration: none; }

a:hover { text-decoration: none; }

/*==============================
DEFAULT
===============================*/

/*==============================
STYLE
===============================*/
body {
text-align: center;
width: 100%;
font-size: 100%;
color: #231815;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
}
#wrap {
width:100%;
margin: 0 auto;
margin-bottom:0px;
text-align:left;
background: #fff;
}

#wrap p.yol {
text-align: right;
font-size: 0.8rem;
background: rgb(255, 255, 255);
padding: 8px 8px 0px 0px;
}

#wrap .flex{
display: flex;
justify-content: flex-start;
align-items: center;
}
#wrap img.arrow{
display: block;
width: auto;
height: 30px;
margin: 10px auto;
}

/*--------------------------
top
---------------------------*/
#ad{
position: absolute;
top: 0;
left:0;
width: 100%;
padding: 24px;
box-sizing: border-box;
}
#ad.flex{
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
margin: 0 auto;
}
#ad.flex p.plan{
width: auto;
font-size: .9rem;
font-weight: 400;
}
#ad.flex span.ad{
display: inline-block;
border: solid 1px #000;
width: auto;
text-align: center;
font-size: 100%;
padding: 2px 16px;
margin-right: 8px;
}
#ad.flex img.logo{
width: auto;
display: block;
height: 20px;
}

/*--------------------------
key
---------------------------*/
#key{
position: relative;
background-image: url(../img/key_pc_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: right bottom;
width: 100%;
aspect-ratio: 2/1;
}
#key .TextArea{
position: absolute;
width: 50%;
top: 50%;
left: 8%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
#key .TextArea img.tittle{
width: 100%;
}
#key .TextArea p{
width: 80%;
font-size: 1.3vw;
margin: 5vw auto 0;
}

/*--------------------------
contents
---------------------------*/
#contents{
width: 100%;
}
#contents .inner{
max-width: 960px;
width: 90%;
margin: 0 auto;
padding: 140px 0;
}

#contents .inner:nth-of-type(1){
padding: 140px 0 80px;
}
#contents .inner:nth-of-type(2){
padding: 80px 0 80px;
}

#contents .white{
background: #fff;
}
#contents .blue{
background: #D8EEEF;
}

#contents .inner .grid{
position: relative;
display: grid;
grid-template-columns: 24% 1fr 24%;
grid-template-rows: 2fr 1fr;
gap: 0px 40px;
justify-content: space-between;
align-items: center;
margin: 80px auto;
}
#contents .inner .grid:nth-of-type(1){
margin: 0px auto 80px;
}
#contents .inner .grid:nth-of-type(2){
margin: 80px auto 0px;
}

#contents .inner.sec .grid:nth-of-type(1){
padding: 0px 0 0px;
}
#contents .inner.sec .grid:nth-of-type(2){
padding: 0px 0 0px;
}

#contents .inner .grid img.imada{
width: 100%;
grid-column: 1 / 2;
grid-row: 1 / 3;
}
#contents .inner .grid h3{
position: relative;
grid-column: 2 / 4;
grid-row: 1 / 2;
}
#contents .inner .grid h3::after{
content: "";
background: url(../img/border.png) repeat-x;
background-size: contain;
display: block;
width: 100%;
height: 16px;
margin-top: 24px;
}
#contents .inner .grid h3 img.tiImage{
width: auto;
height:120px;
margin: 0 auto 0 0;
display: block;
}
#contents .inner .grid h3 img.ill{
position: absolute;
bottom: 0;
right: 2%;
width: 40%;
height: auto;
}
#contents .inner .grid p{
text-align: left;
grid-column: 2 / 4;
grid-row: 2 / 3;
align-self: self-start;
}
#contents .inner .grid p span{
font-size: 70%;
}
/****right****/
#contents .inner .grid.right img.imada{
grid-column: 3 / 4;
}
#contents .inner .grid.right h3{
grid-column: 1 / 3;
}
#contents .inner .grid.right p{
text-align: left;
grid-column: 1 / 3;
grid-row: 2 / 3;
align-self: self-start;
}

/***imada2***/
#contents .inner .grid img.ill.iB{
bottom: 24%;
right: 8%;
width: 20%;
}
/***imada3***/
#contents .inner .grid img.ill.iC{
position: absolute;
top: 0%;
bottom: auto;
right: auto;
left:-5%;
width: 12%;
}
/***imada4***/
#contents .inner .grid img.imada04{
width: 90%;
margin-bottom: 50%;
}
#contents .inner .grid img.ill.iD{
position: absolute;
bottom: -4%;
right: -6%;
width: 24%;
}


#contents section img.full{
width: 100%;
max-width: 960px;
display: block;
margin: 0 auto;
}

#contents .inner.Pmin{
padding: 80px 0;
}

#contents .inner .flex{
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
margin: 40px auto 48px;
gap: 4%;
}
#contents .inner .flex img{
width: 50%;
}
#contents .inner .flex p{
width: 40%;
}

#wrap .inner a.linkBtn{
position: relative;
width: 100%;
background: #fff;
border-radius: 4px;
box-shadow: 0px 4px 11px 2px rgba(0, 0, 0, 0.2);
display: block;
box-sizing: inherit;
padding: 12px;
transition: .3s;
top:0;
}
#wrap .inner a.linkBtn.blue{
background: #D8EEEF;
}
#wrap .inner a.linkBtn:hover{
opacity: .8;
transition: .3s;
top:4px
}
#wrap .inner a.linkBtn p{
text-align: center;
color: #231815;
letter-spacing: .2em;
display: flex;
align-items: center;
justify-content: center;
}
#wrap .inner a.linkBtn p::after{
content: "";
background: #EE87B4;
height: calc(tan(68deg) * 16px / 2);
width: 16px;
clip-path: polygon(0 0, 100% 50%, 0 100%);
margin-left: 16px;
}

/*--------------------------
bottom
---------------------------*/
#bottom{
width: 100%;
}
#bottom .inner{
max-width: 960px;
width: 90%;
margin: 0 auto;
padding: 40px 0 80px;
}
#bottom .inner .flex{
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
margin: 40px auto 48px;
gap: 0%;
}
#bottom .inner .flex img.side{
width: 40%;
}
#bottom .inner .flex img.photo{
width: 55%;
}


.order1{
order: 1;
}
.order2{
order: 2;
}

/********フェード**********/
.sa {opacity: 0;transition: all 1s ease;width: 100%;}
.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);}
/********フェード**********/



.pc { display: block !important; }
.sp { display: none !important; }

@media only screen and (min-width: 500px) and (max-width: 1000px){

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

.pc { display: none !important; }
.sp { display: block !important; }


/*--------------------------
top
---------------------------*/
#ad{
padding: 16px;
}
#ad.flex{
display: block;
}
#ad.flex p.plan{
font-size: 70%;
}
#ad.flex span.ad{
font-size: 90%;
padding: 1px 4px;
}
#ad.flex img.logo{
height: 12px;
margin-top: 8px;
}

/*--------------------------
key
---------------------------*/
#key{
background-image: url(../img/key_sp_bg.jpg);
aspect-ratio: 13/8.5;
}
#key .TextArea{
position: absolute;
width: 50%;
top: 50%;
left: 8%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
#key .TextArea img.tittle{
display: none;
}

/*--------------------------
lead
---------------------------*/
#lead p{
width: 100%;
font-size: .9rem;
margin: 0 auto;
text-align: justify;
}
#lead .inner{
padding: 40px 0 0!important;
}

/*--------------------------
contents
---------------------------*/
#contents .inner{
padding: 16px 0 40px;
}

#contents .inner:nth-of-type(1) {
padding: 16px 0 40px;
}
#contents .inner:nth-of-type(2) {
padding: 40px 0 40px;
}

#contents .inner .grid:nth-of-type(1){
padding: 24px 0 0px;
}
#contents .inner .grid:nth-of-type(2){
padding: 16px 0 0px;
}

#contents .inner.sec .grid:nth-of-type(1){
padding: 0px 0 0px;
}
#contents .inner.sec .grid:nth-of-type(2){
padding: 24px 0 0px;
}

#contents .inner .grid{
display: grid;
grid-template-columns: 22% 1fr;
grid-template-rows: max-content max-content 1fr;
gap: 0px 16px;
justify-content: space-between;
align-items: center;
margin: 16px auto;
}
#contents .inner .grid:nth-of-type(1) {
margin: 0px auto 16px;
}
#contents .inner .grid:nth-of-type(2) {
margin: 16px auto 0px;
}

#contents .inner .grid img.imada{
width: 100%;
grid-column: 1 / 2;
grid-row: 1 / 3;
}
#contents .inner .grid h3{
position: relative;
grid-column: 2 / 3;
grid-row: 1 / 2;
align-self: self-end;
}
#contents .inner .grid h3::after{
content: "";
background: url(../img/border.png) repeat-x;
background-size: cover;
height: 6px;
margin-top: 8px;
}
#contents .inner .grid h3 img.tiImage{
width: auto;
height:40px;
}
#contents .inner .grid img.ill{
position: relative;
width: 34%;
height: auto;
grid-column: 1 / 3;
grid-row: 2 / 3;
margin: 16px auto;
bottom: 0;
right: 0;
}
#contents .inner .grid p{
font-size: 85%;
grid-column: 1 / 3;
grid-row: 3 / 4;
align-self: self-start;
}

#contents .inner .grid img.ill.iA{
width: 40%;
}

/****right****/
#contents .inner .grid.right img.imada{
grid-column: 1 / 2;
}
#contents .inner .grid.right h3{
grid-column: 2 / 3;
}
#contents .inner .grid.right p{
grid-column: 1 / 3;
grid-row: 3 / 4;
}

/***imada2***/
#contents .inner .grid img.ill.iB{
position: relative;
width: 24%;
bottom: 0;
right: 0;
}
/***imada3***/
#contents .inner .grid img.ill.iC{
position: relative;
top: 0%;
bottom: auto;
right: auto;
left:0;
width: 24%;
}
/***imada4***/
#contents .inner .grid img.imada04{
width: 100%;
margin-bottom: 0%;
}
#contents .inner .grid img.ill.iD{
position: relative;
bottom: 0;
right: 0;
width: 50%;
}

#contents .inner.Pmin{
padding: 40px 0;
}

#contents .inner .flex{
margin: 24px auto 32px;
gap: 24px;
}
#contents .inner .flex img{
width: 85%;
}
#contents .inner .flex p{
width: 100%;
font-size:85% ;
}

#wrap .inner a.linkBtn{
padding: 12px 0;
box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.2);
}
#wrap .inner a.linkBtn p{
font-size: 80%;
letter-spacing: 0em;
}
#wrap .inner a.linkBtn p::after{
content: "";
height: calc(tan(68deg) * 12px / 2);
width: 12px;
clip-path: polygon(0 0, 100% 50%, 0 100%);
margin-left: 10px;
}

/*--------------------------
bottom
---------------------------*/
#bottom{
width: 100%;
}
#bottom .inner{
width: 90%;
padding: 0px 0 40px;
}
#bottom .inner .flex{
display: flex;
margin: 24px auto 24px;
gap: 0%;
}
#bottom .inner .flex img.side{
width: 80%;
margin:0 auto 24px;
}
#bottom .inner .flex img.photo{
width: 100%;
}

}