/*
Theme Name: Myth Diamond Salon
Theme URI: https://myth.aichi.jp
Author: Myth Diamond Salon
Author URI: https://myth.aichi.jp
Description: Myth Diamond Salon - プロポーズ専門ダイヤモンドサロンのWordPressテーマ
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myth-diamond
*/

/* Google Fonts (Shippori Mincho / Forum) は functions.php で <link> として読み込み済み */

:root{
    --color1: #500c0c;
    --color2: #efeded;
    --color3: #14173d;
    --color4: #e3e0df;
    --black: #160909;
    --spacing: 0.05em;
}

body {
    padding: 0;
    margin: 0;
    background-color: silver;
}

#MainWrap {
    max-width: 562.5px;
    margin: 0 auto;
    padding: 0;
}

.wrapMain {
    max-width: 562.5px;
    margin: 0 auto;
    background-color: white;
    padding: 0;
}

.box {
}

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    height: 300px;
}

.example {
    display: block;
    width: 100px;
    background: #FFF;
}

.editBtn1 a {
    display: inline-block;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

p {
    margin-block-start: 0;
    margin-block-end: 0;
}

.font_shippori-mincho {font-family: "Shippori Mincho", "YuMincho", "游明朝", "Hiragino Mincho Pro", serif;}
.font_forum {font-family: "Forum", "YuMincho", "游明朝", "Hiragino Mincho Pro", serif;}

/* color */
.txt_color_nomal, .hvr_txt_color_nomal:hover{color: var(--black);}
.txt_white, .hvr_txt_white:hover{color: white;}
.txt_red, .hvr_txt_red:hover{color: #C12326;}
.txt_gray, .hvr_txt_gray:hover{color: #ccc}
.txt_color1, .hvr_txt_color1:hover{color: var(--color1)}
.txt_color2, .hvr_txt_color2:hover{color: var(--color2)}
.txt_color3, .hvr_txt_color3:hover{color: var(--color3)}
.txt_color4, .hvr_txt_color4:hover{color: var(--color4)}

/* background-color */
.bg_white, .hvr_bg_white:hover{background-color: white}
.bg_black, .hvr_bg_black:hover{background-color: var(--black)}
.bg_gray, .hvr_bg_gray:hover{background-color: #ccc}
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1)}
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2)}
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3)}
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4)}
.bg_color_clear, .hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color*/
.border_white, .hvr_border_white:hover{border-color: white}
.border_black, .hvr_border_black:hover{border-color: var(--black)}
.border_gray, .hvr_border_gray:hover{border-color: #ccc}
.border_color1, .hvr_border_color1:hover{border-color: var(--color1)}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2)}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3)}
.border_color4, .hvr_border_color4:hover{border-color: var(--color4)}

.bwrap{
    color: var(--black);
    line-height: 2;
}
.bwrap *, .bwrap *::before, .bwrap *::after{
    box-sizing: border-box;
    letter-spacing: var(--spacing);
}
.box_title, .box_title1, .box_title2, .box_title3, .box_title4, .box_title5{
    line-height: 1.5;
}

/* -- customize ---------------------------------------------------------- */

.shadow-c{
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.05);
}

.bwrap:has(.offer){
    position: relative;
    align-content: flex-start;
}
.bwrap:has(.offer)::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--black);
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0.4;
}

.fv .box_txt1{
    line-height: 1.8;
    color: #fff;
}
.fv .box_txt1 div:not(:has(div)){
    display: inline;
    background-image: linear-gradient(to right, var(--color3) calc(100% - 5em), color-mix(in srgb, var(--color3) 0%, transparent));
    box-decoration-break: clone;
    padding-right: 1em;
    padding-left: 0.5em;
    font-feature-settings: "palt";
    -webkit-box-decoration-break: clone;
}
.fv .box_img1::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color1) 10%, transparent), var(--color1));
}

.c1 .cate_box::before{
    display: none;
}

.c2 .dupe_box:last-of-type{
    padding-bottom: 0;
}
.c2 .dupe_box:nth-of-type(odd) .box_img1{
    padding-right: 10%;
}
.c2 .dupe_box:nth-of-type(even) .box_img1{
    padding-left: 10%;
}

.c3 .box_title2{
    background-image: linear-gradient(to right, color-mix(in srgb, var(--color1) 0%, transparent), var(--color1) 2em, var(--color1) calc(100% - 2em), color-mix(in srgb, var(--color1) 0%, transparent));
}
.c3 .box_img1 img{
    mask-image: linear-gradient(to bottom, transparent, #000 5em);
}