@charset "UTF-8";

/*===========
  COLOR SET
=============*/
:root {
    --main-bg:white;
    --text: #000000;

    --hero-bg: white;
    --hero-color: #000000;

    --h2-bg:navy;
    --h2-color:white;
    --h3-color:rgb(61, 61, 61);
}
@media (prefers-color-scheme: dark) {
    /* NOP */
}

/*
GENERAL STYLING
================================================ */
html {
    font-size: 100%;
    scroll-behavior: smooth;
    height: 100%;
}
body {
	background-color: var(--main-bg);
	color: var(--text);
	font-family: sans-serif;
    display: flex;
    flex-direction: column;
    height: 100%;
}
article{
    flex: 1;
}

/*
COMMON
================================================ */
.title {
    font-family: 'Dancing Script', cursive;
    font-size: 7rem;
    margin-bottom: 2rem;
}
main a {
    line-height: 1.7;
	font-family: "Sawarabi Mincho", sans-serif;
    font-size: 1.125rem;
}
p {
    line-height: 1.7;
	font-family: "Sawarabi Mincho", sans-serif;
    font-size: 1.125rem;
    margin: 0;
}

/*
body
================================================ */
/*Layout*/
.c{
    /*width: 100%;*/
    display: flex; /*直下の要素を並列*/
    justify-content: space-between;
    /*max-width: 100%;*/
    /*max-width: auto;*/
    /*margin: 0 auto;*/
    margin-bottom: 4rem;
    padding: 1rem 2.5rem 2.5rem;

}
.main{
    float: left;
    width: 72%;
    padding: 10px;
    height:auto;
}
.sub{
    width: 22%;
    margin: 0 auto;
    padding: 10px;
}
.flex{
    display: grid;
    width: 100%;
    margin: 0 auto 3rem;
    gap: 2vw;
    grid-template-columns: repeat(1,100%);
}

/*
HEADER
================================================ */
/*
	別cssで設定
*/

/*
breadcrumb
================================================ */
.breadcrumb {
    font-style: italic;
    margin-left: 1rem;
    padding-top: 70px;
}

/*
HERO
================================================ */
#hero {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--hero-bg);
    width: 100%;
    height: 7.5rem;
}
#hero h1{
    line-height: 160%;
    font-size: 250%;
    color: var(--hero-color);
    font-weight: 900;
    margin: auto;
    padding: auto;
}

/*
TOP
================================================ */
.frame_center{
    width: 100%;
    height: calc(50px * 4);
    padding:0.5rem;
}


/*
MAIN
================================================ */
h2{
    line-height: 160%;
    font-size: 160%;
    color: var(--h2-color);
    background-color: var(--h2-bg);
    font-weight: 900;       /*線の太さ*/
    text-align: center;
    margin: auto;
    padding: auto;
}
h3{
    line-height: 130%;
    font-size: 130%;
    color: white;
    background-color: var(--h3-color);
    font-weight: 500;
    text-align: left;
    margin: auto;
    padding: 0 0 0 1rem;      /* 要素：上余白 右余白 下余白 左余白 */
}
h4{
    color: white;
    background-color:navy
}
.b-img{
	/*max-height: 400px;*/
    /*min-width: 1200px;*/
	/*width : 95vw ; */
	/*width : 95%;*/ 
    max-width: 90%;
    padding-top: 0rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}




/*
MOBILE SIZE
================================================ */
@media (max-width: 700px) {
    #hero h1{
        font-size: 1.5rem;
    }
    h2,h3,h4{
        font-size: 1.2rem;
    }
    p{
        font-size: 1rem;
        padding: 0 1rem;
    }
    .c{
        display: contents;
    }
    .main, .sub{
        width: 100%;
        padding: 0;
    }
    .breadcrumb{
        display: none;
    }
    .main{
        padding-top: 70px;
    }
    .frame_center{
        height: calc(55px * 4);
        padding:0rem;
    }
}
@media (max-width: 930px) {
    .flex{
        grid-template-columns: repeat(1,100%);
    }
}
@media (min-width: 1350px) {
    .flex{
        grid-template-columns: repeat(3,33%);
    }
}