/* ------------------------------------------------------------------------
    SAMPLE
------------------------------------------------------------------------  */
.SAMPLE {
    font-weight: 500;
    font-size: .875em;
    color: red;
    margin-top: 5px;
    line-height: 1.5em;
}

/* ------------------------------------------------------------------------
    PAGE TITLE
------------------------------------------------------------------------  */
/* BG */
#PAGE_TITLE:before {
    background-image: url("./images/page_title00_sp.jpg");
}
#PAGE_TITLE.No1:before {
    background-image: url("./images/page_title01_sp.jpg");
}
#PAGE_TITLE.No2:before {
    background-image: url("./images/page_title02_sp.jpg");
}
#PAGE_TITLE.No3:before {
    background-image: url("./images/page_title03_sp.jpg");
}
@media screen and (min-width:769px){
    #PAGE_TITLE:before {
        background-image: url("./images/page_title00_pc.jpg");
    }
    #PAGE_TITLE.No1:before {
        background-image: url("./images/page_title01_pc.jpg");
    }
    #PAGE_TITLE.No2:before {
        background-image: url("./images/page_title02_pc.jpg");
    }
    #PAGE_TITLE.No3:before {
        background-image: url("./images/page_title03_pc.jpg");
    }
}

/* ------------------------------------------------------------------------
    COMMON
------------------------------------------------------------------------  */
span.Caution{
    font-size: .5em;
    vertical-align: top;
    line-height: 1em;
}

/***** Kengaku Image *****/
.Kengaku_Image {
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
}
@media screen and (max-width:768px){
    .Kengaku_Image {
        width: 80%;
        max-width: 428px;
    }
}
@media screen and (min-width:769px){
    .Kengaku_Image {
        bottom: -20px;
    }
}

/***** Color *****/
:root{
    /* color */
    --kengaku-BaseA: rgba(18,155,122,.2);
    --kengaku-No1: rgba(31,184,247,1);
    --kengaku-No2: rgba(239,108,129,1);
    --kengaku-No3: rgba(136,181,14,1);
    --kengaku-No1A: rgba(31,184,247,.2);
    --kengaku-No2A: rgba(239,108,129,.2);
    --kengaku-No3A: rgba(136,181,14,.2);
}

/***** TOP_MESSAGE *****/
.Top_Message {
    position: relative;
    padding: var(--space-20) 0;
}
.Top_Message:before {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
    background: var(--kengaku-BaseA);
    transform-origin: left;
    transform: scale(0,1);
    transition: all .8s;
    z-index: -1;
}
.Top_Message.active:before {
    transform: scale(1,1);
}
.Top_Message p{
    font-weight: 500;
}
.Top_Message p span{
    font-size: .875em;
}
@media screen and (max-width:768px){
    .Top_Message p{
        display: flex;
        justify-content: center;
    }
}
@media screen and (min-width:769px){
    .Top_Message p{
        text-align: center;
    }
}
/* Color */
.No1 .Top_Message:before {
    background: var(--kengaku-No1A);
}
.No2 .Top_Message:before {
    background: var(--kengaku-No2A);
}
.No3 .Top_Message:before {
    background: var(--kengaku-No3A);
}

/***** Kengaku No *****/
.No_Plate {
    position: relative;
    display: inline-block;
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 1.125em;
    font-weight: 700;
    transform: rotate(-5deg);
    margin-left: 1em;
    color: #fff;
}
.No_Plate span{
    font-size: 1.25em;
    margin-left: .125em;
}
@media screen and (min-width:769px){
    .No_Plate {
        font-size: 1.5em;
    }
}
.No_Plate:before,
.No_Plate:after{
    position: absolute;
    left: 50%;
    top: 50%;
    content: '';
    display: block;
    transform: translate(-50%,-50%);
    width: 7em;
	height: 0;
	border-top: 1.5em solid #8ec6ff; /* 高さ */
	border-left: 15px solid transparent; /* 左側下辺の伸び */
	border-right: 25px solid transparent; /* 右側下辺の伸び */
	box-sizing: border-box;
}
.No_Plate:before{
    margin-left: .5em;
    z-index: -2;
}
.No_Plate:after{
    margin-top: 5px;
    margin-left: calc(.5em + 4px);
    z-index: -3;
}
/* Color */
.No1 .No_Plate:before {
    border-top: 1.5em solid var(--kengaku-No1);
}
.No1 .No_Plate:after {
    border-top: 1.5em solid var(--kengaku-No1A);
}
.No2 .No_Plate:before {
    border-top: 1.5em solid var(--kengaku-No2);
}
.No2 .No_Plate:after {
    border-top: 1.5em solid var(--kengaku-No2A);
}
.No3 .No_Plate:before {
    border-top: 1.5em solid var(--kengaku-No3);
}
.No3 .No_Plate:after {
    border-top: 1.5em solid var(--kengaku-No3A);
}

/* ------------------------------------------------------------------------
    KENGAKU
------------------------------------------------------------------------  */
/***** TOP *****/
#KENGAKU_TOP {}
#KENGAKU_TOP h2{
    font-size: 1.35em;
    font-weight: 500;
    text-align: center;
    line-height: 1.5em;
    margin-bottom: .5em;
}
#KENGAKU_TOP h2 span{
    color: var(--main-color);
    font-weight:inherit;
}
@media screen and (min-width:420px) and ( max-width:768px) {
    #KENGAKU_TOP h2{
        font-size: 2em;
    }
}
@media screen and (min-width:769px){
    #KENGAKU_TOP h2{
        font-size: 3em;
    }
}


/***** TOP_CONTENTS *****/
#KENGAKU_TOP #TOP_CONTENTS{}

/* BLOCK */
#KENGAKU_TOP #TOP_CONTENTS .Block:not(:last-child){
    padding-bottom: var(--space-30);
    border-bottom: 1px dotted var(--sub2-color);
}

#KENGAKU_TOP #TOP_CONTENTS .Block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap:var(--space-20);
    row-gap:var(--space-20);
}
#KENGAKU_TOP #TOP_CONTENTS .Block > *{
    width: 100%;
}
#KENGAKU_TOP #TOP_CONTENTS .Block .Image{
}
#KENGAKU_TOP #TOP_CONTENTS .Block .Message{
}
@media screen and (min-width:769px){
    #KENGAKU_TOP #TOP_CONTENTS .Block .Image{
        max-width: calc( (100% - var(--space-20)) *0.4 );
    }
    #KENGAKU_TOP #TOP_CONTENTS .Block .Message{
        max-width: calc( (100% - var(--space-20)) *0.6 );
    }
    /* order */
    #KENGAKU_TOP #TOP_CONTENTS .Block:nth-child(2) .Image{
        order: 2;
    }
    #KENGAKU_TOP #TOP_CONTENTS .Block:nth-child(2) .Message{
        order: 1;
    }
}

/* Title */
#KENGAKU_TOP #TOP_CONTENTS .Block .Message .Block_Title{
    font-weight: 500;
    font-size: 1.25em;
    line-height: 1.5em;
    margin-top: .5em;
    margin-bottom: .5em;
}
#KENGAKU_TOP #TOP_CONTENTS .Block .Message .Block_Title em{
    display: inline-block;
    font-weight:inherit;
    line-height: 1.5em;
    position: relative;
}
#KENGAKU_TOP #TOP_CONTENTS .Block .Message .Block_Title em:before{
    position: absolute;
    left: 0;
    bottom: 5px;
    content: '';
    width: 100%;
    height: .6em;
    z-index: -1;
}
/* Font size */
@media screen and (min-width:420px) and ( max-width:768px) {
    #KENGAKU_TOP #TOP_CONTENTS .Block .Message .Block_Title{
        font-size: 1.75em;
    }
}
@media screen and (min-width:769px){
    #KENGAKU_TOP #TOP_CONTENTS .Block .Message .Block_Title{
        font-size: 2.5em;
    }
}
/* Color */
#KENGAKU_TOP #TOP_CONTENTS .Block .Message.No1 .Block_Title em:before{
    background: var(--kengaku-No1A);
}
#KENGAKU_TOP #TOP_CONTENTS .Block .Message.No2 .Block_Title em:before{
    background: var(--kengaku-No2A);
}
#KENGAKU_TOP #TOP_CONTENTS .Block .Message.No3 .Block_Title em:before{
    background: var(--kengaku-No3A);
}

/* Sub Message */
.Sub_Message {
    font-weight: 500;
}

/* Sub Image */
.Sub_Images {
    display: flex;
    column-gap:5%;
    margin-top: var(--space-10);
    margin-bottom: var(--space-10);
}

/* Btn */
.Btn_Area {
    margin-top: var(--space-20);
}



/***** KENGAKU_CONTENTS *****/
#KENGAKU_CONTENTS{}
#KENGAKU_CONTENTS .Block{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    row-gap:var(--space-20);
}
#KENGAKU_CONTENTS .Block:nth-child(even){
    padding: var(--space-30) 0;
}
#KENGAKU_CONTENTS .Block:nth-child(even):before{
    position: absolute;
    left: 50%;
    top: 0;
    content: '';
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: var(--sub4-color);
    z-index: -2;
}

#KENGAKU_CONTENTS .Contents{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-20);
    row-gap:var(--space-20);
}
#KENGAKU_CONTENTS .Contents .Item{
    width: 100%;
}
@media screen and (min-width:769px){
    /* Sub */
    /*
    #KENGAKU_CONTENTS .Contents .Item{
        max-width: calc( (100% - ( var(--space-20) * 2 ) ) / 3 );
    }
    */
    #KENGAKU_CONTENTS .Contents .Item{
        max-width: calc( (100% - var(--space-20) ) / 2 );
    }
    /* Main */
    #KENGAKU_CONTENTS .Contents.Main .Item:nth-child(1){
        max-width: calc( (100% - var(--space-20)) *0.4 );
    }
    #KENGAKU_CONTENTS .Contents.Main .Item:nth-child(2){
        max-width: calc( (100% - var(--space-20)) *0.6 );
    }
}

/*** MAIN ***/

/* Title */
#KENGAKU_CONTENTS h3 {
    font-weight: 500;
    font-size: 1.5em;
    line-height: 1.5em;
    margin-bottom: 10px;
}
#KENGAKU_CONTENTS .Title {
    font-size: 1.25em;
    line-height: 1.5em;
    margin-bottom: 10px;
    font-weight: 500;
}
#KENGAKU_CONTENTS .Sub_Message {
    margin-top: 1.5em;
}
/* Font size */
/*
@media screen and (min-width:420px) and ( max-width:768px) {
    #KENGAKU_CONTENTS h3 {
        font-size: 1.5em;
    }
    #KENGAKU_CONTENTS .Title {
        font-size: 1.25em;
    }
}
*/
@media screen and (min-width:769px){
    #KENGAKU_CONTENTS h3 {
        font-size: 2em;
    }
    #KENGAKU_CONTENTS .Title {
        font-size: 1.5em;
    }
}
/* Color */
.No1 #KENGAKU_CONTENTS h3 {
    color: var(--kengaku-No1);
}
.No2 #KENGAKU_CONTENTS h3 {
    color: var(--kengaku-No2);
}
.No3 #KENGAKU_CONTENTS h3 {
    color: var(--kengaku-No3);
}

/*** SUB ***/
#KENGAKU_CONTENTS .Contents.Sub {
    padding-top: var(--space-20);
    border-top: 1px dotted var(--sub-color);
}
/*
#KENGAKU_CONTENTS .Contents.Sub .Item {
    display: flex;
    flex-wrap: wrap;
    column-gap:20px;
    row-gap:20px;
}
#KENGAKU_CONTENTS .Contents.Sub .Item > *{
    width: 100%;
}
@media screen and (min-width:1200px){
    #KENGAKU_CONTENTS .Contents.Sub .Item .Image{
        max-width: calc( (100% - 20px) * 0.4 );
    }
    #KENGAKU_CONTENTS .Contents.Sub .Item .Message{
        max-width: calc( (100% - 20px) * 0.6 );
    }
}
*/

#KENGAKU_CONTENTS .Contents.Sub .Item .Image{
    margin-bottom: 1.5em;
    display: flex;
    justify-content: center;
}
#KENGAKU_CONTENTS .Contents.Sub .Item .Image img{
    width: 100%;
}
@media screen and (min-width:769px){
    #KENGAKU_CONTENTS .Contents.Sub .Item .Image img{
        width: 80%;
    }
}

/* Remarks */
#KENGAKU_CONTENTS .Remarks{
    width: 100%;
    box-sizing: border-box;
    margin-top: var(--space-20);
    padding: 1.5em;
    font-weight: 500;
    font-size: 1.125em;
    display: flex;
    justify-content: center;
    border-radius: 5px;
}
@media screen and (min-width:769px){
    #KENGAKU_CONTENTS .Remarks{
        text-align: center;
    }
}
/* Color */
.No1 .Remarks {
    background: var(--kengaku-No1A);
}
.No2 .Remarks {
    background: var(--kengaku-No2A);
}
.No3 .Remarks {
    background: var(--kengaku-No3A);
}

/* ------------------------------------------------------------------------
    KENGAKU SELECT
------------------------------------------------------------------------  */
#KENGAKU_SELECT .container{
    display: flex;
    flex-wrap: wrap;
    row-gap:20px;
    column-gap: 30px;
}
#KENGAKU_SELECT .container .Item{
    width: 100%;
}
@media screen and (min-width:769px){
    #KENGAKU_SELECT .container .Item{
        flex: 1;
    }
}
/* Item */
#KENGAKU_SELECT .container .Item{
    display: flex;
    border:1px solid var(--sub-color);
}
/* Image */
#KENGAKU_SELECT .container .Item .Image{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 80px;
}
#KENGAKU_SELECT .container .Item.No1 .Image{
    background-image: url("images/top_blockimage_01.jpg");
}
#KENGAKU_SELECT .container .Item.No2 .Image{
    background-image: url("images/top_blockimage_02.jpg");
}
#KENGAKU_SELECT .container .Item.No3 .Image{
    background-image: url("images/top_blockimage_03.jpg");
}
/* Text */
#KENGAKU_SELECT .container .Item .Text{
    position: relative;
    width: calc(100% - 80px);
    box-sizing: border-box;
    padding: 1em;
}
#KENGAKU_SELECT .container .Item .Text p{
    font-weight: 500;
    line-height: 1.5em;
}
@media screen and (min-width:769px){
    #KENGAKU_SELECT .container .Item .Image{
    }
    #KENGAKU_SELECT .container .Item .Text{
    }
}
/* Plate */
#KENGAKU_SELECT .Select_Plate {
    position: absolute;
    top: -10px;
    left: -10px;
}
#KENGAKU_SELECT .No_Plate {
    position: relative;
    font-size: .875em;
    margin-left: 1em;
}
#KENGAKU_SELECT .No_Plate span{
    font-size: 1.125em;
    margin-left: .125em;
}
@media screen and (min-width:769px){
    #KENGAKU_SELECT .No_Plate {
        font-size: 1em;
    }
}

/* ------------------------------------------------------------------------
    SOLUTION
------------------------------------------------------------------------  */
#SOLUTION {
    position: relative;
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
}
#SOLUTION:before,
#SOLUTION:after{
    position: absolute;
    right: 0;
    top: 40%;
    content: '';
    width: 60%;
    height: 60%;
    transition: opacity 1s, transform .6s;
	transition-delay: .3s;
	opacity: 0;
	transform: translateY(30px);
}
#SOLUTION:before {
    background-image: url("../asset/images/solution_image.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -3;
}
#SOLUTION:after {
    background: rgba(255,255,255,.8);
    z-index: -2;
}
#SOLUTION.active:before,
#SOLUTION.active:after{
    opacity: 1;
	transform: translateY(0);
}

#SOLUTION .container:before{
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100vw;
    height: 70%;
    background: var(--sub4-color);
    z-index: -4;
    transform: scale(0,1);
    transform-origin: left;
    transition: all 1s;
}
#SOLUTION.active .container:before{
    transform: scale(1,1);
}
@media screen and (min-width:769px){
    #SOLUTION:before,
    #SOLUTION:after{
        top: 0;
        width: 50%;
        content: '';
        height: 100%;
    }
    #SOLUTION:after {
        background: rgba(0,0,0,.3);
    }
}
/* Contents */
#SOLUTION .Contents{
    width: 100%;
}
#SOLUTION .Contents .Btn_Area{
    margin-top: var(--space-30);
}
#SOLUTION .Btn_Area .Btn:not(:hover){
    background: #fff;
}
@media screen and (min-width:769px){
    #SOLUTION .Contents{
        max-width: 48%;
    }
    #SOLUTION .Contents .Title_Area .Title {
        text-align: left;
    }
    #SOLUTION .Contents .Title_Area .Title:after {
        left: 40px;
    }
}