/* CSS Document */


/*- menu -*

変更領域, fv

* filetop *
------------------------------------------------------------------------------------------------------------------------------------------*/

/*- File name [ style.css ] -*/

/*------------------------------------------------------------------------------------------------------------------------------------------

* 変更領域

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/

.m-plus-rounded-1c{
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-style: normal;
}

.noto-sans-jp {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

/*- body -*/
body, body *{
	font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: #333;
}

/*- header -*/
header{
    border-bottom: 5px solid #c70057;
}

/*- footer -*/
footer .inner{
    background: #ae0048;
}

footer .inner p{
	color: #FFFFFF;
}

/*- main -*/
main{
    background: url(../img/bg.jpg) repeat center;
} 

main *{
    font-family: "M PLUS 1p", sans-serif;
    font-style: normal;
}

/*- title -*/
h3.title span{
	border-color: #000000;
	font-weight: 700;
}

/*- box_center -*/
/* .box_center{
	padding-inline: clamp(12px, 3.125vw, 24px);
}

.box_center > *{
} */

/*- top -*/
/* #top{
} */

/*- btm -*/
/* #btm{
} */

/*- rule_mv -*/

/*- method_mv -*/




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	/*- rule_mv -*/
	
	/*- method -*/
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* fv

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
.fv .fv_box{
    background: url("../img/fv/pc_bg.png") no-repeat center;
    background-size: auto 100%;
}

.fv .fv_box img{
    margin-right: auto;
    margin-left: auto;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* top_box

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#top_box{
    padding-block: clamp(40px, 6.25vw, 80px);
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* anchor_area

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
.anchor_area .anchor_area__inner h3 img{
    width: clamp(170px, 18.75vw, 240px);
    margin-inline: auto;
}

.anchor_area .anchor_area__list > * + *{
    margin-top: clamp(12px, 5vw, 64px);
}




/* SP用 ~767px（SP）
---------------------------------------------------------------------*/

@media print,screen and (max-width: 767px) {
	
    .anchor_area .anchor_area__inner h3 + *{
        margin-top: 40px;
    }
	
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* contents_mv

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
* + #contents_mv{
    margin-top: clamp(40px, 4.6875vw, 60px);
}

#contents_mv .contents_about .inner > * + *{
    margin-top: clamp(40px, 4.375vw, 56px);
}

#contents_mv #mv_local_list > li{
    position: relative;
    max-width: 1024px;
    margin-inline: auto;
}

#contents_mv #mv_local_list > li .btn{
    box-shadow: clamp(4px, 0.46875vw, 6px) clamp(4px, 0.46875vw, 6px) clamp(6px, 0.78125vw, 10px) 0 rgba(0, 0, 0, 0.3);
    border-radius: 99px;
    overflow: hidden;
    transform: translateX(-50%);
    position: absolute;
    bottom: 5%;
    left: 50%;
}

#contents_mv #mv_local_list > li .btn img{
    width: min(56vw, 320px);
}

#contents_mv #mv_local_list > li .btn:hover{
    opacity: 0.7;
}

#contents_mv * + #mv_local_list{
    margin-top: clamp(24px, 3.125vw, 40px);
}

#contents_mv #mv_hayatoku img{
    margin-inline: auto;
    max-width: 600px;
    width: 100%;
}

#contents_mv * + #mv_hayatoku{
    margin-top: 40px;
}

#contents_mv * + #mv_category{
    margin-top: clamp(40px, 4.6875vw, 60px);
}

#contents_mv #mv_category .category_list{
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(2, 1fr);
}

#contents_mv #mv_category .category_list .list_item{
    display: block;
    position: relative;
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
}

#contents_mv #mv_category .category_list .list_item .item_text{
    background-color: rgba(0, 0, 0, 0.6);
    font-size: clamp(1.2rem, 1.09375vw, 1.4rem);
    color: #FFFFFF;
    line-height: 1.2;
    padding: clamp(12px, 1.25vw, 16px);
    height: 30%;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

#contents_mv #mv_category .category_list .list_item .item_text::after{
    content: "";
    display: block;
    background: url(../img/arrow01.svg) no-repeat center;
    background-size: contain;
    aspect-ratio: 1 / 1;
    width: clamp(12px, 1.171875vw, 15px);
    position: absolute;
    bottom: 6px;
    right: 6px;
}

#contents_mv #mv_category .category_list .list_item:hover{
    opacity: 0.7;
}

#contents_mv #mv_category .notice{
    font-size: clamp(1.6rem, 1.40625vw, 1.8rem);
}

#contents_mv #mv_category * + .notice{
    margin-top: clamp(10px, 1.5625vw, 20px);
}

#contents_mv #mv_banner{
    text-align: center;
}

#contents_mv * + #mv_banner{
    margin-top: clamp(40px, 4.375vw, 56px);
}

#contents_mv #mv_banner a{
    display: inline-block;
}

#contents_mv #mv_banner a img{
    border-radius: 8px;
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
}

#contents_mv #mv_banner a:hover{
    opacity: 0.7;
}




/* SP用 ~767px（SP）
---------------------------------------------------------------------*/

@media print,screen and (max-width: 767px) {
	
    #contents_mv #mv_local_list > li + li{
        margin-top: 16px;
    }
	
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#contents_mv #mv_local_list > li .btn{
        transform: translateX(0);
        bottom: 15%;
        right: 6%;
        left: auto;
    }

    #contents_mv #mv_category .category_list{
        grid-template-columns: repeat(4, 1fr);
    }

    #contents_mv #mv_category .notice{
        text-align: center;
    }
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	#contents_mv #mv_category .category_list{
        grid-template-columns: repeat(5, 1fr);
    }
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* contents_aeon

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#contents_aeon{
    background-color: #f8f397;
}

#contents_aeon .inner{
    padding-block: clamp(40px, 6.25vw, 80px) clamp(40px, 7.8125vw, 100px);
}

#contents_aeon .inner .title + *{
    margin-top: clamp(40px, 4.6875vw, 60px);
}

#contents_aeon .inner .column_box{
    display: grid;
    gap: clamp(40px, 4.6875vw, 60px) 20px;
}

#contents_aeon .inner * + .column_box{
    margin-top: clamp(20px, 4.6875vw, 60px);
}

#contents_aeon .inner .column_box .column_text > * + *{
    margin-top: 20px;
}

#contents_aeon .inner .column_box .column_text .gift_btn > *{
    padding: 0;
}

#contents_aeon .inner .column_box .column_text .gift_btn > * + *{
    margin-top: clamp(12px, 1.25vw, 16px);
}

#contents_aeon .inner .column_box .column_text .gift_btn a{
    display: inline-block;
    margin: 0;
}

#contents_aeon .inner .column_box .column_text .gift_btn a:hover{
    opacity: 0.7;
}

#contents_aeon .inner .notice_text{
    padding-left: clamp(1.8rem, 2.34375vw, 3rem);
    text-indent: calc(clamp(1.8rem, 2.34375vw, 3rem) * -1);
    font-weight: 700;
    font-size: clamp(1.8rem, 2.34375vw, 3rem);
    line-height: 1.2;
    color: #009260;
    margin-top: 30px;
}




/* SP用 ~767px（SP）
---------------------------------------------------------------------*/

@media print,screen and (max-width: 767px) {

    #contents_aeon .inner .column_box .column_text > * + *{
        margin-top: 40px;
    }
	
    #contents_aeon .inner .column_box .column_text .gift_btn{
        text-align: center;
    }

    #contents_aeon .inner .column_box .column_text .gift_btn a{
        width: 60%;
    }

    #contents_aeon .inner .column_box .column_image img{
        margin-inline: auto;
        width: 66%;
    }

    #contents_aeon .inner .notice_text{
        margin-top: 40px;
    }
	
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#contents_aeon .inner .column_box{
        grid-template-columns: repeat(2, 1fr);
    }

    #contents_aeon .inner .column_box .column_text{
        padding-left: clamp(16px, 2.5vw, 32px);
    }

    #contents_aeon .inner .notice_text{
        text-align: center;
    }
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* Add Sample Code

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}