@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

@font-face {
    src: url(../font/M_PLUS_Rounded_1c/MPLUSRounded1c-Light.ttf);
    font-family: M_PLUS_Rounded_1c;
}



header {
    position: relative;
    background-image: url(../images/suzuki.jpg);
    background-size: 100% 100%;
    height: 100vh
}

.header-flex {
    display: flex;
}

nav {
    z-index: 100;
    position: fixed;
    width: 75%;  
    margin-top: 3.5vw;
    margin-left: 10%; 
}

nav ul {
    display: flex;
    list-style-type: none; 
}

nav ul li {
    width: calc(100% / 6); 
}

nav ul li a {
    display: block;
    line-height: 2.4;
    text-decoration: none;
    text-align: center;
    font-weight: 700;    
    font-size: 1.3vw;
    font-family: M_PLUS_Rounded_1c;  
    color: white;
    border-right: 0.1vw solid white;
    transition: 0.7s;
    background-color: rgba(210, 180, 140,0.7);
   
}

nav ul li a:hover {
    color:#8b4513;
    transition: 0.7s;
}

.web {
    position: fixed;
    left: 87%;
    width: 10%;     
    margin-left: auto;
    margin-right: auto;   
}

.web a { 
    background-color: rgba(210, 180, 140,0.6);
    display: block;
    font-size: 2vw;
    font-weight: 700;
    font-family: M_PLUS_Rounded_1c;
    text-decoration: none;
    text-align: center;
    color:white;
    border: 0.2vw solid burlywood;
    border-radius: 1.5vw;
    margin-top: 2.5vw;
    padding: 5%;
    transition: 0.7s;
}

.web a:hover {
    color:#8b4513;
    transition: 0.7s;
}


h1 {
    position: absolute;
    top: 7vw;
    width: 22%;   
    height: 65vh;
    margin-left: 2vw;
    margin-top: 2vw;
}

h1 img {
    width: 100%;
    height: 100%;
}

.text {
    position: absolute;
    left: 45vw;
    top: 6vw;
    white-space: pre-wrap;
    width: 44%;
    text-align: center;
    color: white;
    font-size: 2.5vw;
    font-weight: 700;
    font-family: M_PLUS_Rounded_1c;    
}

.text p {
    background-color: rgba(220, 220, 220,0.5);
}

/*セクションお知らせ*/
.notice {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4vw;
    text-align: center;
    border-bottom:  0.2vw solid #cd853f;
    padding-bottom: 2vw;
    color: #696969;
    
}

.notice h2 {
    border: none;
    border-top: 0.2vw solid #cd853f;
    text-align: center;
}

.notice h2::before {
    content: "重要なお知らせ";
    display: inline-block;
	position: relative;
	top: -1.2vw;
	padding: 0 2vw;
	background-color: white;
}

.notice p {
    text-align: left;
    margin-left: 2vw;
    margin-top: 1vw;
    font-size: 1.2vw;   
}

/*セクションメッセージ*/
.message {
    margin-left: auto;
    margin-right: auto;
    white-space: pre-wrap;
    text-align: center;
    font-family: M_PLUS_Rounded_1c;
    color: #696969;
    line-height: 2.4;
}

.message h2 {
    font-size: 2.5vw;
    margin-bottom: -5vw;
}

/*img-flex*/
.img-up {   
    display: flex;
    width: 85%;
    margin-left: auto;
    margin-right: auto;       
}

.img-up img {
    width: 32%;
    height: 35vh;    
}

.img-up img:nth-of-type(2) {
    margin-left: 2%;
    margin-right: 2%;
}

.img-down {
    display: flex;
    margin-top: 2vw;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vw;  
}

.img-down img {
    width: 32%;
    height: 35vh;   
}

.img-down img:nth-of-type(2) {
    margin-left: 2%;
    margin-right: 2%;
}

.menu-flex {
    display: flex;
}

/*お子様*/
.left-child {
    width: 50%;
    margin-top: 5vw;
    margin-bottom: 5vw;
    background-color: #fff0f5;  
}

.menu-flex h2 {
    width: 6vw;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2vw;
    text-align: center;
    font-size: 2vw;
    font-family: M_PLUS_Rounded_1c;
    color: #696969;
    border-bottom: 0.3vw dotted  #696969;    
}

.menu-flex h3 {
    text-align: center;
    margin-top: 2vw;
    font-size: 1.3vw;
    font-family: M_PLUS_Rounded_1c;
    color: #696969;
}

.menu-flex p {
    text-indent: 1em;
    line-height: 1.7;
    margin-top: 2vw;
    margin-left: 3vw;
    margin-right: 3vw; 
    font-size: 1.2vw;
    font-family: M_PLUS_Rounded_1c;
    color: #696969;
}

.left-child .kids-img {
    width: 95%;
    margin-top: 2vw;
    margin-left: auto;
    margin-right: auto;
}

.left-child .kids-img img {    
    width: 100%;
    height: 80vh;
}

.kids-icon {
    display: flex;
    width: 80%;
    margin-top: 3vw;
    margin-left: auto;
    margin-right: auto;
}

.kids-left-icon {
    width: calc(100% / 3);
}

.kids-center-icon {
    width: calc(100% / 3);
}

.kids-right-icon {
    width: calc(100% / 3);
}

.kids-icon img {
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.kids-icon a {
    display: block;
    text-align: center;
    text-decoration: none;
    font-family:  M_PLUS_Rounded_1c;
    font-size: 1.2vw;
    color: #696969;
}


.left-child .gacha {
    position: relative; 
    width: 65%;
    margin-left: 5vw;
}

.left-child .gacha img {   
    display: block;
    width: 100%;
    margin-top: 3vw;
    margin-bottom: 3vw;
}

.left-child .gacha p {
    position: absolute;
    width: 89%;
    top: 19vw;
    left: 3vw;
    white-space: pre-wrap;
    font-family:  M_PLUS_Rounded_1c;
    font-weight: 700;
    font-size: 1.3vw;   
    text-indent: 0em;
    text-align: center;
    background-color: #ffb6c1;
    border-radius: 2vw;  
}

/*成人*/
.right-adult {
    width: 50%;
    margin-top: 5vw;
    margin-bottom: 5vw;
    width: 50%;
    margin-top: 5vw;
    background-color: #f5f5dc;  
}

.right-adult .adult-img {
    width: 95%;
    margin-top: 2vw;
    margin-left: auto;
    margin-right: auto;   
}

.right-adult .adult-img img {
    width: 100%;
    height: 80vh;
}

.adult-icon-first {
    display: flex;
    width: 95%;
    margin-top: 3vw;
    margin-left: auto;
    margin-right: auto;
}

.adult-icon1 {
    width: calc(100% / 4);   
}

.adult-icon2 {
    width: calc(100% / 4);   
}

.adult-icon3 {
    width: calc(100% / 4);   
}

.adult-icon4 {
    width: calc(100% / 4);   
}

.adult-icon-first img {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.adult-icon-first a {
    display: block;
    text-align: center;
    text-decoration: none;
    font-family:  M_PLUS_Rounded_1c;
    font-size: 1.2vw;
    color: #696969;
}

.adult-icon-second {
    display: flex;
    width: 95%;
    margin-top: 3vw;
    margin-left: auto;
    margin-right: auto;
}

.adult-icon5 {
    width: calc(100% / 4);   
}

.adult-icon6 {
    width: calc(100% / 4);   
}

.adult-icon7 {
    width: calc(100% / 4);   
}

.adult-icon8 {
    width: calc(100% / 4);   
}

.adult-icon-second img {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;

}

.adult-icon-second a {
    display: block;
    text-align: center;
    text-decoration: none;
    font-family:  M_PLUS_Rounded_1c;
    font-size: 1.2vw;
    color: #696969;
}

.adult-icon-third {
    display: flex;
    width: 80%;
    margin-top: 3vw;
    margin-left: auto;
    margin-right: auto;
}

.adult-icon9 {
    width: calc(100% / 3);   
}

.adult-icon10 {
    width: calc(100% / 3);   
}

.adult-icon11 {
    width: calc(100% / 3);   
}

.adult-icon-third img {
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.adult-icon-third a {
    display: block;
    text-align: center;
    text-decoration: none;
    font-family:  M_PLUS_Rounded_1c;
    font-size: 1.2vw;
    color: #696969;
    padding-bottom: 3vw;
}


/*4つのお約束*/
.commitment h3 {
    text-align: center;
    font-size: 1.7vw;
    font-family:  M_PLUS_Rounded_1c;
    color: #696969;
   
  
}

.commitment h2 {
    text-align: center;
    font-size: 3vw;
    font-family:  M_PLUS_Rounded_1c;
    margin-top: 2vw;
    color: #696969;
}

.flex1 {
    display: flex;
}

.commitment .promise-img {
    width: 55%;
}

.commitment img {
    display: block;
    width: 95%;
    height: 30vw;
    margin-top: 5vw;
    margin-left: auto;
    margin-right: auto;
}

.commitment .text1 {
    width: 45%;    
}

.commitment .text1 h2 {
    margin-top: 6vw;
    color: #ff7f7f;
}

.commitment .text1 h3 {
    white-space: pre-wrap;   
    font-size: 2.5vw;
    font-family:  M_PLUS_Rounded_1c;
    color: #696969;
         
}

.commitment .text1 p {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5vw;
    font-size: 1.2vw;
    font-family:  M_PLUS_Rounded_1c;
    color: #696969;
    text-indent: 1em;
    line-height: 1.7;    
}


.commitment a {
    background-color: #ffe4e1;
    display: block;
    width: 20%;
    font-size: 1.2vw;
    font-weight: 700;
    font-family: M_PLUS_Rounded_1c;
    text-decoration: none;
    text-align: center;
    color: #f2a0a1;
    border: 0.2vw solid #ffcce5;
    border-radius: 1.5vw;
    margin-top: 2vw;
    padding: 2%;
    transition: 0.7s;
    margin-left: auto;
    margin-right: auto;
}

.commitment a:hover {
    color: #cd5c5c;
    transition: 0.7s;
}

/*スケジュール*/
.schedule {
    display: flex;
    margin-top: 5vw; 
    font-family:  M_PLUS_Rounded_1c;
    color: #696969; 
    background-color: beige; 
}

.schedule address {
    width: 40%;
    height: 20vw;
    padding-top: 3vw;
    padding-bottom: 7vw;
   
} 

.schedule p {
    font-size: 2vw;
    text-align: center;
}

.schedule a {
    width: 50%;
    height: 0.5vw;
    background-color: rgba(210, 180, 140,0.6);
    display: block;
    font-size: 2vw;
    font-weight: 700;
    font-family: M_PLUS_Rounded_1c;
    text-decoration: none;
    text-align: center;
    color:white;
    border: 0.2vw solid burlywood;
    border-radius: 1.5vw;
    margin-top: 2.5vw;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5vw;
    padding-bottom: 4vw;
    transition: 0.7s;  
}

.schedule a:hover {
    color:#8b4513;
    transition: 0.7s;
}

/*表*/
.schedule .right-schedule {
    width: 50%;   
    margin-top: 6vw;
}

.schedule .right-schedule table {
    width: 80%;
    height: 30vh;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1vw;
    border-radius: 20px;
    border-collapse: collapse;
    border: 0.3vw solid  burlywood;
} 

tr {
    font-size: 1.4vw;
    text-align: center;
   
}

th {  
    border: 0.3vw solid  burlywood; 
    background-color: blanchedalmond;
    font-size: 1.5vw;
}

td {  
    border: 0.3vw solid  burlywood;
    background-color: white; 
    font-size: 1.5vw;
}

.right-schedule p {
    width: 100%;
    font-size: 1.2vw;
    text-align: left;
    margin-left: 5vw;
    margin-top: 0.5vw;
}

/*住所map*/
.map {
    display: flex;
}

.address-left {
    width: 50%;
}

.address-up {
    width: 90%;
    margin-top: 5vw;
    text-align: center;
    font-size: 1.5vw;
    font-family:  M_PLUS_Rounded_1c;
    color: #696969;
  
}

.address-down {
    width: 85%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 3vw;
    border-top: 0.2vw dotted  #696969;
    border-bottom: 0.2vw dotted  #696969;
   
}

.address-down li {
    list-style-type: none;
    font-size: 1.3vw;
    font-family:  M_PLUS_Rounded_1c;
    color: #696969;
    line-height: 1.7;
    padding-top: 2vw;   

}

.address-right {
    margin-top: 1vw;
    margin-bottom: 1vw;
    width: 50%;
}

footer .footer-flex {
    background-color: rgba(210, 180, 140,0.6);
    display: flex;
    width: 100%;
}

footer .address {
    width: 28.333%;
    color: white;
    font-weight: 700; 
    font-size: 1.3vw;
    font-family:  M_PLUS_Rounded_1c;
    line-height: 2.0;
    padding-top: 5vw;
    padding-left: 5%;
}

footer .rogo {
    width: 33.333%;   
}

footer img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vw;
    margin-bottom: 2vw;
    width: 60%;
    height: 50vh; 
}

footer .navigation {
    width: 33.333%;    
}

footer .navigation ul {
    list-style-type: none;
    margin-top: 5vw;  
    
}

footer .navigation ul li a {
    display: block;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    line-height: 2.5;
    font-weight: 700; 
    font-size: 1.3vw;
    font-family:  M_PLUS_Rounded_1c;
    color: white;
    text-decoration: none;
    transition: 0.7s;
}

footer .navigation ul li a:hover {
    color:#8b4513;
    transition: 0.7s;
}

footer p {
    text-align: center;
    font-family:  M_PLUS_Rounded_1c;
    color: #696969;
    background-color: beige;
    padding-top: 1vw;
    padding-bottom: 1vw;
}