@charset "utf-8";
/* CSS Document */

@import url("https://fonts.googleapis.com/css2?family=Kosugi&family=Roboto&family=Noto+Sans&display=swap");

*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* コーナータイトル非表示 */
#cookie_agree{width:100%;}
#corner_name .title,
#corner_main_text .title {
    display: none;
}

#corner_contents {
    width: 100%;
    background: #000;
    background:
    url("../images/bg_wide.png") center top no-repeat,
    url("../images/bg_pat.png"),
    linear-gradient(#000 5%, #393939 15%, #494949 20%, #494949 30%, #393939 35%, #000,#333 60%, #333 61%, #000 70%);
    background-attachment: fixed;
}
.contents_wrap {
    position: relative;
    width: 100%;
}
.main_contents H1, H2, .main_contents H3, .main_contents H4, .main_contents H5, .main_contents H6, .main_contents p, .main_contents td, .main_contents th, .main_contents div, .main_contents input, .main_contents textarea, .main_contents ol, .main_contents ul, .main_contents li, .main_contents pre, .main_contents .sub_text {
    font-family: 'Roboto', 'Kosugi', sans-serisf;
    font-size: 0.9rem;
}

/**------------------------------------------- 商品 --*/
.item_list { margin-top: 20px; }
.item_list ul {
    margin: 0 0 30px;
    padding-top: 0px;
    background: rgba(98,189,184, 0.25);
}
.item_list ul li {
    margin: 0;
    padding: 15px;
    border-bottom: 1px solid rgba(98,189,184, 0.5);
}
.item_list ul li a {
    color: #fff;
}
.item_list ul li .item_list_class p {
    padding: 0 10px;
    font-size: 0.6rem;
}
.item_list ul li .item_list_thumb {
    background: #fff;
}
.item_list ul li .item_list_ttl {
    font-weight: 500;
}
.item_list ul li p.price {
    color: #62BDB8;
    font-weight: 500;
}

/**-------------------------------------------- nav --*/
#corner_nav ul {
    
}
#corner_nav ul li {
    padding: 6px 12px;
    font-size: 1.2rem;
}
#corner_nav ul li:first-of-type {
    padding-top: 8px;
}

#corner_nav ul li a {
    position: relative;
    margin: 0;
    padding: 10px 0;
    color: #fff;
    text-align: center;
    font-family: 'Kosugi', sans-serisf;
    font-weight: 500;
    background: rgba(98, 189, 184, 0.25);
    border: 1px solid rgba(98,189,184, 0.5);
    text-shadow: 0 0 10px rgba(98, 200, 245, 0.8);
    box-shadow: 0 0 1px 1px rgba(10, 59, 117, 0.3);
}

/**----------------------------------------- 見出し --*/
h2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    margin: 60px auto 0;
    color: #fff;
    font-family: 'Kosugi', sans-serisf;
    font-size: 1.4rem;
    font-weight: 500;
    background: transparent;
}
h2::before, h2::after {
    position: absolute;
    left: 0;
    display: block;
    height: 2px;
    width: 100%;
    content: "";
    background: linear-gradient(90deg, rgba(98,189,184,0), rgba(98,189,184,1) 20%, rgba(98,189,184,1) 80%, rgba(98,189,184,0));
}
h2::before { top: 0; }
h2::after { bottom: 0; }

h3.corner_h3 {
    margin: 0 0 15px;
    padding: 10px 0 0;
    text-align: left;
    color: #333;
    border-bottom: 1px solid #000;
}

/**------------------------------------- 情報エリア --*/ 
div.text a {
    border-bottom: none;
    text-decoration: underline;
    color: #fff;
}
.info_wrap {
  	width: 100%;
    margin-top: 30px;
    color: #fff;
    background: rgba(0, 0, 0, 0.25);
}
.info_wrap a {
    color: #62bdb8;
    text-decoration: underline;
}
.info_box {
    margin: 0;
    padding: 20px 10px;
}

.attention_list li,
.attention_txt {
    display: block;
    margin-top: 3px;
    font-size: 0.84rem;
    text-indent: -1em;
    padding-left: 1em;
    line-height: 1.5em;
}
.attention_list li a,
.attention_txt a {  }


/* ご利用の流れ */
.flex_box { margin-bottom: 15px; }
.flex_box:last-child { margin-bottom: 0; }

.desc_img {
	/*border: 1px solid #666;*/
}
.desc_img img{
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    padding: 2px;
}
.desc_img span {
    display: block;
    margin: 1px;
    padding: 2px 4px 0;
    background: #333;
}

/**-------------------------------------------------- PC -*/
@media screen and (min-width: 711px) {
    body { box-sizing: border-box; }
    #corner_contents .main_contents {
        width: 100%;
    }
    /* #corner_main_text, /* 1080px */
    .corner_products,
    section div.text {
        width: 1080px;
        margin: 0 auto;
    }
    /* clearfix */
    section div.text::after,
    dl::after,
    .info_box::after,
    .info_box dd::after {
        display: block;
        clear: both;
        content: "";
    }
    
    /**------------------------------------------- 商品 --*/
    .item_list ul {
        background: transparent;
    }
    .item_list ul li {
        margin: 0 15px 40px;
        padding: 0;
        border-bottom: none;
    }
    .item_list ul li a {
        background: rgba(98,189,184, 0.25);
        border: 1px solid rgba(98,189,184, 0.5);
        transition: .3s;
    }
    .item_list ul li a:hover {
        opacity: 1;
        background: rgba(98,189,184, 0.5);
        box-shadow: 0 0 10px rgba(98,189,184, 0.5);
    }
    
    /**-------------------------------------------- nav --*/
    #corner_nav {
    }
    #corner_nav ul {
        display: flex;
        flex-wrap: wrap;
        width: 1080px;
        margin: 0 auto;
        justify-content: center;
    }
    #corner_nav ul li {
        width: calc( 100% / 3 );
        margin: 0;
        padding: 10px;
    }
    #corner_nav ul li:first-of-type { padding-top: 10px; }
    #corner_nav ul li a {
        text-decoration: none;
        transition: .3s;
    }
    #corner_nav ul li a:hover {
        opacity: 1;
        background: rgba(98,189,184, 0.5);
        box-shadow: 0 0 10px rgba(98,189,184, 0.5);
    }
    
    /**------------------------------------- 情報エリア --*/
    .info_wrap a {
        opacity: 1;
        transition: .3s;
    }
    .info_wrap a:hover {
        color: #fff!important;
        text-decoration-color: transparent;
    }
    .info_wrap {
        width: 1080px;
        margin:30px auto;
        border: 1px solid #333;
    }
    .info_box p {
        font-size: 1rem;
    }
    
    .flex_item {
        display: flex;
        flex-wrap: wrap;
    }
    .flex_item div { margin-right: 10px; }
    .flex_item div:nth-child(even) { margin-right: 0; }
    .w50p { width: calc(50% - 5px); }
    
    .flex_box {
        display: flex;
        margin-bottom: 30px;
    }
    .flex_box .desc_img {
    }
    .flex_box .desc_txt {
        margin-top: 0;
        margin-left: 12px;
    }
}