/* ▼フォント系 */
:root {
	--color-black: #474241;         /* 黒 */
	--color-white: #ffffff;         /* 白 */
	--color-red: #f55b79;           /* 赤 */
	--color-blue: #1d60cc;          /* ベースカラー・売却 */
	--color-lightblue: #c0d3f1;          /* ベースカラー・売却 */
	--color-yellow: #f2d744;        /* 買取 */
	
	--color-blue-gradation:linear-gradient(45deg, #1d1f70, #1d60cc );
	--color-yellow-gradation:linear-gradient(45deg, #aa7b00, #f2d744);

	--color-palegrayline: #F5F4F2;  /* 線用の薄いグレー */
	--color-gray: #939292;          /* 文字色用グレー */
	--color-palegray: #eaeaea;      /* 背景用薄いグレー */
	--color-darkgray: #bababa;      /* 濃いグレー*/
	
	--btn-radius : 10px;
}
*
{
    font-family: 'メイリオ', Meiryo, sans-serif;
    padding: 0;
    margin: 0;
    /*font-size: 16px;
    line-height: 25px;*/
}
a
{
    text-decoration: none;
}
img
{
    width: 100%;
}
.font_noto
{
    font-family: 'Noto Sans JP';
}
.text_underline_blue, .text_underline_yellow
{
    font-size: inherit;
    font-weight: inherit;
}
.text_underline_blue
{
    background: linear-gradient(transparent 70%, var(--color-blue) 70% 88%, transparent 88%);
}
.text_underline_yellow
{
    background: linear-gradient(transparent 70%, var(--color-yellow) 70% 88%, transparent 88%);
}
h3 img
{
    width: auto;
}
/* -------------------------------------------------------------- EYECATCH ▽*/
#EYECATCH
{
    height: 400px;
    background-image: url(../img/eyecatch.jpg);
    background-size: 60%;
    background-position: 100% 50%;
    position: relative;
}
#EYECATCH::before
{
    content: "　";
    display: block;
    background: var(--color-blue-gradation);
    width: 45%;
    height: 100%;
}
#EYECATCH > div
{
    position: relative;
}
#EYECATCH > div
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
#EYECATCH > div > div *
{
    color: var(--color-white);
}
#EYECATCH > div > div
{
    display: grid;
    height: 100%;
    align-items: center;
    align-content: center;
    gap: 10px;
}
#EYECATCH > div > div span
{
    font-size: 28px;
}
#EYECATCH > div > div h1
{
    font-size: 48px;
    line-height: 65px;
}
/* -------------------------------------------------------------- SELL_PURCHASE ▽*/
#SELL_PURCHASE h3 img
{
    position: absolute;
    margin-top: -50px;
    margin-left: -30px;
}
#SELL_PURCHASE > div:nth-of-type(1), #SELL_PURCHASE > div:nth-of-type(2)
{
    display: grid;
    gap: 50px;
    align-items: start;
}
#SELL_PURCHASE > div:nth-of-type(1){grid-template-columns: 3fr 2fr;}
#SELL_PURCHASE > div:nth-of-type(2)
{
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
#SELL_PURCHASE > div:nth-of-type(2) h4
{
    font-size: 20px;
    line-height: 28px;
    color: var(--color-white);
    padding: 15px;
    text-align: center;
}
#SELL_PURCHASE > div:nth-of-type(2) ul
{
    margin: 20px 20px 20px 50px;
}
#SELL_PURCHASE > div:nth-of-type(2) ul li
{
    list-style-type: disc;
    font-size: 18px;
    line-height: 1.8rem;
}
#SELL_PURCHASE > div:nth-of-type(2) > div
{
    border: 2px var(--color-palegrayline) solid;
        padding: 0px 0px 20px 0px;
}
#SELL_PURCHASE > div:nth-of-type(2) > div > span
{
    display: block;
    color: var(--color-white);
    font-size: 18px;
    width: 200px;
    padding: 10px 10px 10px 40px;
    border-radius: var(--btn-radius);
    margin: auto;
    position: relative;
    cursor: pointer;
}
#SELL_PURCHASE > div:nth-of-type(2) > div:nth-of-type(1) h4{background: var(--color-blue-gradation);}
#SELL_PURCHASE > div:nth-of-type(2) > div:nth-of-type(1) > span{background: var(--color-blue);}
#SELL_PURCHASE > div:nth-of-type(2) > div:nth-of-type(2) h4{background: var(--color-yellow-gradation);}
#SELL_PURCHASE > div:nth-of-type(2) > div:nth-of-type(2) > span{background: var(--color-yellow);}

#SELL_PURCHASE > div p
{
    display: none;
}
#SELL_PURCHASE > div [class="active"] + p
{
    display: block;
    padding: 20px 30px;
}

#SELL_PURCHASE > div:nth-of-type(2) > div > span::after
{
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 10px;
    transform: rotate(45deg);
    position: absolute;
    right: 30px;
}
#SELL_PURCHASE > div:nth-of-type(2) > div > span::after
{
    border-bottom: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
    border-top: 0px none;
    border-left: 0px none;
    top: calc(50% - 10px);
}
#SELL_PURCHASE > div:nth-of-type(2) > div > span.active::after
{
    border-bottom: 0px none;
    border-right: 0px none;
    border-top: 2px solid var(--color-white);
    border-left: 2px solid var(--color-white);
    top: calc(50% - 3px);
}
/* -------------------------------------------------------------- DATA ▽ */
#DATA, #CONTACT
{
    background-color: var(--color-palegray);
    padding: 50px 0px;
}
#DATA > div
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 50px ;
    align-items: center;
}
#DATA > div > div
{
    background: var(--color-white);
    padding: 50px;
    height: 100%;
    position: relative;
}
#DATA > div > div h4::before
{
    padding-right: 10px;
}
#DATA > div > div:nth-of-type(1) h4::before{content: "01.";}
#DATA > div > div:nth-of-type(2) h4::before{content: "02.";}
#DATA > div > div:nth-of-type(3) h4::before{content: "03.";}
#DATA > div > div p
{
    margin: 10px 0px 30px 0px;
}
#DATA > div > div:nth-of-type(1)
{
    grid-template-columns: auto auto;
    display: grid;
    gap: 20px;
    align-items: center;
}
#DATA > div > div:nth-of-type(1) div,
#DATA > div > div:nth-of-type(3)
{
    display: grid;
    align-content: start;
    grid-template-rows: auto auto 1fr;
}
#DATA > div > div:nth-of-type(1) ul,
#DATA > div > div:nth-of-type(3) img
{
    margin-top: auto;
}
#DATA > div > div:nth-of-type(1) ul li
{
    font-size: 14px;
}
#DATA > div > div:nth-of-type(1) ul li::before
{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    top: 4px;
    margin-right: 5px;
    border-radius: 3px;
}
#DATA > div > div:nth-of-type(1) ul li:nth-of-type(1)::before{background-color: var(--color-blue);}
#DATA > div > div:nth-of-type(1) ul li:nth-of-type(2)::before{background-color: #5da2f4;}
#DATA > div > div:nth-of-type(1) ul li:nth-of-type(3)::before{background-color: var(--color-yellow);}
/* -------------------------------------------------------------- REASON ▽*/
#REASON h3 img
{
    position: absolute;
    margin-top: -40px;
    margin-left: -150px;
}
#REASON > div
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    /*gap: 100px;*/
    gap: 20px 50px;
    margin-bottom: 70px;
}
#REASON > div:nth-last-of-type(1)
{
    margin-bottom: 0px;
}
#REASON > div h4 span
{
    font-size: 24px;
    line-height: 33px;
}
#REASON > div h4
{
    display: grid;
    grid-template-columns: 60px auto;
    margin-bottom: 30px;
    align-items: center;
    gap: 20px;
}
#REASON > div h4::before
{
    content: "";
    background-repeat: no-repeat;
    background-position: 50%;
    height: 50px;
}
#REASON > div:nth-of-type(1) h4::before{background-image: url(../img/title_no_reason1.png);}
#REASON > div:nth-of-type(2) h4::before{background-image: url(../img/title_no_reason2.png);}
#REASON > div:nth-of-type(3) h4::before{background-image: url(../img/title_no_reason3.png);}
#REASON > div:nth-of-type(4) h4::before{background-image: url(../img/title_no_reason4.png);}
#REASON > div:nth-of-type(5) h4::before{background-image: url(../img/title_no_reason5.png);}
#REASON > div:nth-of-type(2n) div
{
    order: 2;
}
#REASON > div:nth-of-type(2n) img
{
    order: 1;
}
#REASON a
{
    display: inline-block;
    background-color: var(--color-blue);
    color: var(--color-white);
    font-size: 18px;
    padding: 10px 50px 10px 30px;
    border-radius: var(--btn-radius);
    position: relative;
    margin: 30px 0px 0px 0px;
}
#REASON a::after
{
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 10px;
    transform: rotate(45deg);
    position: absolute;
    right: 20px;
    border-bottom: 0px none;
    border-right: 2px solid var(--color-white);
    border-top: 2px solid var(--color-white);
    border-left: 0px none;
    top: calc(50% - 5px);
}
#REASON > div:nth-of-type(4)
{
    text-align: center;
}
#REASON > div:nth-of-type(4) h4, #REASON > div:nth-of-type(4) p
{
    text-align: left;
}
/* -------------------------------------------------------------- POINT ▽ */
#POINT ul
{
    display: grid;
    gap: 20px 80px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-content:center;
}
#POINT ul li h4
{
    display: grid;
    grid-template-columns: 50px auto;
    align-items: center;
    gap: 20px;
    line-height: 29px;
    margin-bottom: 20px;
    height: 60px;
}
#POINT ul li h4::before
{
    content: "";
    width: 50px;
    height: 40px;
    background-image: url(../img/icon_crown.png);
}
#POINT ul li p
{
    font-size: 20px;
    line-height: 29px;
}
/* -------------------------------------------------------------- SUCCESS ▽*/
#SUCCESS > div *
{
    color: var(--color-white);
}
#SUCCESS h4::after
{
    content: "";
    width: 35px;
    background-color: var(--color-white);
    display: block;
    height: 3px;
    margin: 15px 0px 13px 0px;
}
#SUCCESS > div
{
    margin-top: 50px;
}
#SUCCESS > div, #SUCCESS > div > div
{
    position: relative;
}
#SUCCESS > div > div
{
    padding: 50px 100px;
    z-index: 10;
}
#SUCCESS > div::before, #SUCCESS > div::after
{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc((100vw - 1200px) / 2 + 1200px);
}
#SUCCESS > div:nth-of-type(1)::before
{
    left: 0;
    background: url(../img/bg_success_sell.jpg);
    background-size: cover;
    background-position: 50%;
}
#SUCCESS > div:nth-of-type(2)::before
{
    right: 0;
    background: url(../img/bg_success_purchase.jpg);
    background-size: cover;
    background-position: 50%;
}
#SUCCESS > div::after
{
  mix-blend-mode: multiply;
  opacity: 0.8;
}
#SUCCESS > div:nth-of-type(1)::after
{
    left: 0;
    background: var(--color-blue-gradation);
}
#SUCCESS > div:nth-of-type(2)::after
{
    right: 0;
    background: var(--color-yellow-gradation);
}
#SUCCESS div span
{
    display: block;
    width: 100%;
    text-align: right;
    margin: 50px 0px 0px 0px;
}
/* -------------------------------------------------------------- QA ▽*/
.qa dt
{
	font-size : 18px;
	background-color : var(--color-lightblue);
	padding : 15px;
	position : relative;
    margin: 0px 0px 10px 0px;
	padding-right: 60px;
}
.qa dt:before
{
	content : "Q";
	display : inline-block;
	background-color : #ffffff;
    padding: 5px 10px 5px 10px;
    margin: 0px 10px 0px 0px;
}
.qa dt:after, .qa dt.active:after
{
	content : "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 10px;
	transform: rotate(45deg);
	position : absolute;
	right : 20px;
}
.qa dt:after
{
	border-bottom: 3px solid var(--color-black);
	border-right: 3px solid var(--color-black);
	border-top: 0px none;
	border-left: 0px none;
	top : calc(50% - 10px);
	
}
.qa dt.active:after
{
	border-top: 3px solid var(--color-black);
	border-left: 3px solid var(--color-black);
	border-bottom: 0px none;
	border-right: 0px none;
	top : calc(50% + 0px);
}
.qa dd
{
	padding : 5px 15px 30px 15px;
	display : none;
}
.qa dd:before
{
	content : "A";
	display : inline-block;
	background-color : var(--color-blue);
    color: var(--color-white);
    padding: 5px 10px 5px 10px;
    margin: 0px 10px 0px 0px;
	font-size : 18px;
}
.qa dd 
{
    grid-template-columns: 41px auto;
    align-items: start;
    gap: 10px;
}
/* -------------------------------------------------------------- cta ▽*/
.contact_cta
{
    /*background: var(--color-blue-gradation);*/
    background: url(../img/bg_cta.jpg);
    padding: 40px;
    background-position: 100%;
    background-size: cover;
    position: relative;
}
.contact_cta h4
{
    color: var(--color-white);
    line-height: 36px;
}
.contact_cta ul
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(auto, 360px));
    gap: 20px 40px;
    justify-content: center;
}
.contact_cta a
{
    display: grid;
    grid-template-columns: auto auto;
    border-radius: var(--btn-radius);
    padding: 10px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
}
.contact_cta img
{
    display: block;
}
.contact_cta div
{
    font-size: 13px;
    line-height: 25px;
}
.contact_cta .contact_pc span
{
    font-size: 22px;
    line-height: 22px;
}
.contact_cta .contact_tel span
{
    font-size: 26px;
    line-height: 26px;
}
.contact_pc a
{
    background-color: var(--color-blue);
}
.contact_pc *
{
    color: var(--color-white);
}
.contact_tel a
{
    background-color: var(--color-white);
    border: solid var(--color-blue) 3px;
}
@media screen and (max-width:1200px)
{
    #EYECATCH
    {
        background-size: cover;
        background-position: 0% -80px;
    }
    #EYECATCH > div > div span
    {
        font-size: 24px;
    }
    #EYECATCH > div > div h1
    {
        font-size: 40px;
        line-height: 55px;
    }
}
@media screen and (max-width:1003px)
{
    /* -------------------------------------- SELL_PURCHASE */
    #SELL_PURCHASE > div:nth-of-type(1)
    {
        grid-template-columns: 1fr;
    }
    #SELL_PURCHASE h3 img, #REASON h3 img
    {
        width: 120px;
    }
    #SELL_PURCHASE h3 img {
        margin-top: -30px;
    }
    /* -------------------------------------- REASON */
    #REASON h3 img
    {
        margin-top: -30px;
        margin-left: -100px;
    }
    #REASON h4 br
    {
        display: none;
    }
    #REASON > div:nth-of-type(2n) div
    {
        order: 1;
    }
    #REASON > div:nth-of-type(2n) img
    {
        order: 2;
    }
    #REASON > div h4
    {
        margin-bottom: 20px;
    }
    /* -------------------------------------- DATA */
    #DATA h3
    {
        text-align: center;
    }
    #DATA > div > div:nth-of-type(1)
    {
        grid-template-columns: 1fr;
    }
    #DATA > div > div:nth-of-type(1) div br
    {
        display: none;
    }
    #DATA > div > div > img
    {
        width: 100%;
        margin: auto;
    }
    #DATA > div > div:nth-of-type(1)  p
    {
        margin: 10px 0px 0px 0px;
    }
    #DATA > div > div:nth-of-type(1) ul
    {
        display: grid;
        grid-template-columns: repeat(3, auto);
        margin: 10px 0px 0px 0px;
    }
    #DATA > div > div:nth-of-type(1) > img
    {
        width: auto;
    }
}
@media screen and (max-width:768px)
{
    .text_underline_blue
    {
        background: linear-gradient(transparent 90%, var(--color-blue) 90% 100%, transparent 100%);
    }
    .text_underline_yellow
    {
        background: linear-gradient(transparent 90%, var(--color-yellow) 90% 100%, transparent 100%);
    }
    #SELL_PURCHASE h3 img, #REASON h3 img
    {
        display: none;
    }
    #SELL_PURCHASE > div:nth-of-type(2),
    #DATA > div, #REASON > div
    {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    /* -------------------------------------- EYECATCH */
    #EYECATCH::before
    {
        display: none;
    }
    #EYECATCH > div > div span,
    #EYECATCH > div > div h1
    {
        position: relative;
    }
    #EYECATCH > div > div span
    {
        display: block;
        padding: 20px 20px 0px 20px;
        font-size: 18px;
    }
    #EYECATCH > div > div h1
    {
        padding: 0px 20px 20px 20px;
        font-size: 28px;
        line-height: 36px;
    }
    #EYECATCH > div > div::before
    {
        content: "　";
        display: block;
        background: var(--color-blue-gradation);
        position: absolute;
        height: 100%;
        width: 100%;
    }
    #EYECATCH > div > div
    {
        height: auto;
        bottom: 0px;
        position: absolute;
        width: 100%;
        max-width: unset;
    }
    #SELL_PURCHASE > div:nth-of-type(2) ul li
    {
        font-size: 16px;
    }
    /* -------------------------------------- REASON */
    #REASON a
    {
        padding: 10px 35px 10px 20px;
    }
    #REASON a::after
    {
        margin: 0 0px 0 10px;
    }
    /* -------------------------------------- POINT */
    #POINT ul li p {
        font-size: 16px;
        line-height: 25px;
    }
    #POINT ul li h4
    {
        grid-template-columns: 40px auto;
        gap: 10px;
        height: 45px;
        margin-bottom: 10px;
    }
    #POINT ul li h4::before
    {
        width: 40px;
        height: 30px;
        background-size: contain;
        background-repeat: no-repeat;
    }
    /* -------------------------------------- DATA */
    #DATA > div > div:nth-of-type(1) ul
    {
        display: grid;
        grid-template-columns: repeat(1, auto);
        position: absolute;
        bottom: 50px;
    }
    #DATA > div > div:nth-of-type(1) > img
    {
        width: auto;
        margin: -60px 0px 0px auto;
    }
    /* -------------------------------------- SUCCESS */
    #SUCCESS > div > div
    {
        padding: 50px 0px;
    }
    #SUCCESS > div::after {
        mix-blend-mode: normal;
        opacity: 0.9;
    }
    /* -------------------------------------- CTA */
    .contact_cta h4 {
        line-height: 30px;
    }
}
@media screen and (max-width:650px)
{
    #DATA > div > div:nth-of-type(1) ul
    {
        grid-template-columns: auto auto auto;
        position: absolute;
        bottom: 10px;
        gap: 10px;
        margin-right: 20px;
    }
    #DATA > div > div:nth-of-type(1) > img
    {
        margin: auto auto 30px auto;
    }
    #DATA > div > div p
    {
        margin: 10px 0px 20px 0px;
    }
    #DATA > div > div
    {
        padding: 30px;
    }
}