@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: gainsboro;
}


/* header */
header {
    display: flex;
    position: fixed;
    width: 100%;  
    padding-top: 2%;  
    align-items: baseline;
    background-color: rgba(246, 241, 101, 0.826);  
}
h1 {
    width: 25%;
 
    margin-left: 5%;

}
h1 img {
    width: 100%;
    vertical-align: bottom;
}

/* nav */
nav {
    width: 70%; 
    margin-left: 3%;
    
}
nav ul {
    display: flex;
    width: 96%;
    padding: 2%;
    margin-left: auto;
    list-style-type: none;
}
nav ul li {
    width: 24%;
    margin-left: 1%;
    margin-right: 1%;
    margin-left: auto;
}
nav ul li a {
    display: block;
    width: 100%;
    padding-top: 3%;
    padding-bottom: 3%;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.5em;
    color: #877F6C;
    font-size: 2.2vw;
    font-weight: 600;
    overflow: hidden;
    transition: 1s;
}
nav ul li a:hover {
    color: yellowgreen;
    background-color: whitesmoke;
    border-radius: 3%;
    transition: 1s;
}
nav ul li:hover a {
    transform: scale(1.1,1.1);
}
/* nav */
/* header 終了 */


/* main */
main {
    display: flex;
    width: 100%;
    height: 80vw;
    align-items: center;
    justify-content: center;
    background-image: url(../images/imgi_33_kv_1.jpg);
    background-size: cover;  
    background-attachment: fixed;
    margin-bottom: 5%;
}
.main1 {
    width: 55%;
    margin-top: 15%;
    margin-left: 8%;
    margin-right: auto;
    margin-bottom: auto;
    color: #373C38;
}
.main1 p {
    font-size: 3vw;
    letter-spacing: 0.1em;
}

/* /////// */
.main201 {
    display: none;
}
/* //////// */

.main2 {
    width: 45%;
    margin-top: auto;
    margin-left: auto;
    margin-right: 5%;
    margin-bottom: 3%;
    text-align: right;
    font-size: 3vw;
    color: #373C38;
}

/* section1 */
.section1 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8%;
    margin-bottom: 5%;
    padding-top: 3%;
    padding-bottom: 3%;
}
.section1 h3 {
    width: 20%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
}
.section1 h3 a {
    display: block;
}
.section1 h3 img {
    width: 100%;
}

.section-box1 {
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}


/* ///// */
.section-child1 {
    display: none;
}
/* /////// */


.section-child101 {
    width: 50%;
    margin-bottom: 3%;
    margin-left: 3%;
    color: #373C38;
}
.p1 a {
    display: block;
    width: 35%;
    line-height: 2;
    text-align: center;
    text-decoration: none;
    border-radius: 10%;
    font-weight: 600;
    font-size: 2vw;
    color: #373C38;
    background-color: yellowgreen;
    transition: 0.5s;
}
.p1 a:hover {
    color: whitesmoke;
    transition: 0.5s;
}
.p2 {
    margin-top: 2%;
    margin-bottom: 2%;
    font-size: 2.5vw;
    font-weight: 500;
}
.p3 {
    font-size: 2.5vw;
}
.section-child2 {
    width: 40%;
    margin-left: auto;
}
.section-child2 img {
    width: 100%;
    vertical-align: bottom;
}
/* //////// */
.section-box2 {
    display: none;
}
/* ////////// */

.section-box201 {
    width: 90%;
    margin-top: 3%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1%;
    padding-bottom: 2%;
    background-color: khaki;
}

/* figure */
.figure {
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    margin-bottom: 2%;
    overflow: hidden;
    transition: 0.5s;
    border-radius: 3%;
    box-shadow: 4px 4px 2px 2px #B4A582;     
    background-color: whitesmoke;
}
.figure:hover {
    transform: scale(1.05,1.05);
    transition: 1s;
    box-shadow: 0px 0px 0px 0px #B4A582;
}
.figure div {
    width: 31%;
    padding: 2%;
}
.figure div img {
    display: block;
    width: 100%;
    border-radius: 5%;
}
.figure a {
    display: block;
}
figcaption {
    margin: 2%;
    width: 61%;
    margin-left: auto;
    margin-right: 2%;
    text-decoration: none; 
    font-size: 2vw;
    color: #373C38;
}
figcaption p {
    width: 25%;
    margin-bottom: 2%;
    line-height: 1.5;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-size: 2vw;
    background-color: burlywood;
}
/* figure */


/* section2のタイトル */
.title-1 {
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    align-items: center;
}
.title-1 h3 {
    width: 100%;   
}
.title-1 h3 a img {
    display: block;
    width: 100%;
}
/* section2のタイトル 終了 */


/* section2 */
.section2 {
    display: flex;
    width: 84%;
    height: 30vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3%;
    align-items: center;
    background-image: url(../images/imgi_11_lineup_sched_pc.jpg);
    background-position: center,center;
    background-size: cover; 
}

.section2-box1 {
    width: 50%; 
    margin-top: 3%;
    margin-left: 2%;
    margin-bottom: 3%; 
}
.section2-child {
    width: 85%;
    margin-top: 3%;
    margin-bottom: 3%;
}
.section2-box1 img {
    width: 100%;
}
.p4 {
    font-weight: 500;
    font-size: 2vw;
    color: #373C38;
}
.p5 {
    width: 35%;
    text-align: center;
    font-size: 2vw;
    line-height: 2;
    font-weight: 600;
    border-radius: 10%;
    background-color: yellowgreen;
    color: #373C38;
    transition: 0.5s;
}
.p5:hover {
    color: whitesmoke;
    transition: 0.5s;
}


/* section3 */
.section3 {
    display: flex;
    width: 84%;
    height: 30vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3%;
    align-items: center;
    background-position: center,center;
    background-image: url(../images/imgi_13_lineup_pencase2_pc.jpg);
    background-size: cover;    
}

.section3-box1 {
    width: 50%; 
    margin-top: 3%;
    margin-left: auto;
    margin-right: 2%;
    margin-bottom: 3%; 
}

.section3-child {
    width: 90%;
    margin-top: 2%;
    margin-left: auto;
    margin-bottom: 2%;
}
.section3-box1 img {
    width: 100%;
}
.p6 {
    width: 80%;
    padding-top: 3%;
    margin-left: 10%;
    font-size: 2vw;
    font-weight: 500;
    color: #373C38;
}
.p7 {
    width: 35%;
    margin-left: auto;
    text-align: center;
    line-height: 2;
    font-size: 2vw;
    font-weight: 600;
    border-radius: 10%;
    background-color: yellowgreen;
    color: #373C38;
    transition: 0.5s;
}
.p7:hover {
    color: whitesmoke;
    transition: 0.5s;
}

/* section4 */
.section4 {
    display: flex;
    width: 84%;
    height: 30vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3%;
    align-items: center;
    background-position: center,center;
    background-image: url(../images/imgi_15_lineup_accessories_pc.jpg);
    background-size: cover;    
}

.section4-box1 {
    width: 50%; 
    margin-top: 3%;
    margin-left: 2%;
    margin-bottom: 3%; 
}
.section4-child {
    width: 90%;
    margin-top: 2%;
    margin-bottom: 2%;
}
.section4-box1 img {
    width: 100%;
}
.p8 {
    padding-top: 3%;
    font-weight: 500;
    font-size: 2vw;
    color: #373C38;
}
.p9 {
    width: 35%;
    text-align: center;
    line-height: 2;
    font-size: 2vw;
    font-weight: 600;
    border-radius: 10%;
    background-color: yellowgreen;
    color: #373C38;
    transition: 0.5s;
}
.p9:hover {
    color: whitesmoke;
    transition: 0.5s;
}

/* section5 */
.section5 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    padding-top: 3%;
    padding-bottom: 3%;
    border-radius: 2%;
}
.section5 div {
    width: 30%;
    margin-left: auto;  
    margin-right: auto;
    margin-bottom: 3%;
}
.section5 div img {
    width: 100%;

}
.section5 ul {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
}
.section5 ul li {
    padding: 2%;
    border-bottom: 1px solid goldenrod;
    color: #373C38;
}
.section5 ul li time {
    font-size: 1.5vw;
    color: #373C38;
}
.section5 ul li a {
    display: block;
    text-decoration: none;
    border-radius: 10%;
    font-size: 2vw;
    color: #373C38;
    transition: 0.5s;
}
.section5 ul li a:hover {
    color: yellowgreen;
    transition: 0.5s;
}


/* pege top戻るボタン */
.section6 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8%;
    margin-bottom: 2%;   
    letter-spacing: 0.1em;
    font-size: 2vw;
}

.top a {
    display: block;
    width: 14%;
    margin-left: auto;
    margin-right: 2%;
    line-height: 2.5;
    text-align: center;
    text-decoration: none;
    border-radius: 5%;
    color: #373C38;
    background-color: yellowgreen;
    transition: 1s;    
}
.top a:hover {
    width: 15%;
    transition: 1s;
    color: yellowgreen;
    background-color: rgba(246, 241, 101, 0.826);
}
/* pege top戻るボタン 終了 */


/* footer */
footer {
    padding-top: 2%;
    background-color: rgba(246, 241, 101, 0.826);
}
.footer1 {
    display: none;
}
.footer2 {
    display: flex;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    color: #373C38;    
}

.footer-box5 {
    display: none;
}
.footer-box501 {
    display: flex;
    width: 100%;
    align-items: center;
    margin-left: 5%;
}
.logo {
    width: 15%;
    margin-top: 5%;
    
}
.logo img {
    width: 100%;
    vertical-align: bottom;
}
.footer-box501 p {
    width: 20%;
    margin-top: 1.5%;
    margin-left: 2%;
    font-size: 2.5vw;
    font-weight: 600;
    color: #373C38;
    transition: 1s;
}
.footer-box501 p:hover {
    color: yellowgreen;
    transition: 1s;
}
.address {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 1.8vw;

}
address {
    font-style: normal;
}
.footer-box6 {
    display: flex;
    width: 18%;
    align-items: center;
    margin-right: 5%;
}
.footer-box6 i {
    margin-left: auto;
    margin-top: 5%;
    text-indent: 1.7vw;
    font-size: 3vw;
}
.footer-box6 a {
    display: block;
    width: 100%;
    color: #877F6C;
    font-size: 3vw;
    transition: 0.5s;
}
.footer-box6 a:hover {
    color: yellowgreen;
    transition: 0.5s;
}

.copy {
    margin-top: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    text-align: center;
    font-size: 2vw;
    background-color: #877F6C;
    color: whitesmoke;
    transition: 0.5s;
}
.copy:hover {
    color: yellowgreen;
    transition: 0.5s;
}
/* footer 終了 */