/* ==========================================================
 OMAI UI Kit v1.0
 Base Style
 https://e-okomeshop.com

========================================================== */


/*==================================================
  COLOR
==================================================*/

:root{

--om-green:#556B2F;

--om-green-dark:#445426;

--om-gold:#B89B5E;

--om-gold-dark:#9D8145;

--om-bg:#FAF8F3;

--om-white:#FFFFFF;

--om-border:#E7E1D8;

--om-text:#444444;

--om-sub:#777777;

--om-danger:#B94A48;

--om-radius:8px;

--om-shadow:0 8px 24px rgba(0,0,0,.05);

--om-transition:.25s ease;

/* ボタン用（「ボタン標準仕様」が参照します） */

--om-btn-radius:6px;

--om-btn-padding:16px 34px;

}



/*==================================================
  RESET
==================================================*/

.om *,
.om *::before,
.om *::after{

box-sizing:border-box;

}

.om img{

display:block;

max-width:100%;

height:auto;

}

.om table{

border-collapse:collapse;

width:100%;

}

.om ul,
.om ol{

margin:0;

padding:0;

}

.om li{

list-style:none;

}

.om a{

text-decoration:none;

transition:var(--om-transition);

}

.om p{

margin:0 0 1.2em;

line-height:1.7;

}

.om p:last-child{

margin-bottom:0;

}



/*==================================================
  WRAPPER
==================================================*/

.om{

margin:40px 0;

font-size:16px;

line-height:1.7;

color:var(--om-text);

}



/*==================================================
  TITLE
==================================================*/

.om-title{

margin:70px 0 40px;

text-align:center;

font-size:34px;

font-family:"Yu Mincho","Hiragino Mincho ProN",serif;

font-weight:700;

letter-spacing:.08em;

color:var(--om-green);

}

.om-title::after{

content:"";

display:block;

width:70px;

height:2px;

margin:18px auto 0;

background:var(--om-gold);

}



/*==================================================
  HEADING
==================================================*/

.om-heading{

margin:50px 0 25px;

padding-left:16px;

border-left:5px solid var(--om-gold);

font-size:28px;

font-weight:700;

line-height:1.5;

color:var(--om-green);

}



/*==================================================
  CARD
==================================================*/

.om-card{

background:var(--om-white);

border:1px solid var(--om-border);

border-radius:var(--om-radius);

padding:24px;

box-shadow:var(--om-shadow);

transition:var(--om-transition);

}

.om-card:hover{

box-shadow:0 12px 28px rgba(0,0,0,.08);

}



/*==================================================
  BUTTON

  ※ ここにあった .om-btn は「ボタン標準仕様」へ移動しました。
     二重定義を避けるため、ここには追記しないでください。
==================================================*/



/*==================================================
  CHECK LIST
==================================================*/

.om-check{

margin:18px 0;

}

.om-check li{

position:relative;

padding-left:28px;

margin-bottom:8px;

line-height:1.7;

}

.om-check li::before{

content:"✓";

position:absolute;

left:0;

top:0;

color:var(--om-green);

font-weight:bold;

}



/*==================================================
  BADGE
==================================================*/

.om-badge{

display:inline-block;

padding:5px 12px;

background:var(--om-green);

color:#fff;

font-size:12px;

letter-spacing:.08em;

border-radius:4px;

}



/*==================================================
  UTILITY
==================================================*/

.u-center{

text-align:center;

}

.u-right{

text-align:right;

}

.u-left{

text-align:left;

}

.u-mt20{

margin-top:20px;

}

.u-mt40{

margin-top:40px;

}

.u-mb20{

margin-bottom:20px;

}

.u-mb40{

margin-bottom:40px;

}



/*==================================================
  RESPONSIVE
==================================================*/

@media (max-width:768px){

.om{

font-size:15px;

}

.om-title{

font-size:26px;

margin:50px 0 30px;

}

.om-heading{

font-size:22px;

margin:40px 0 20px;

}

.om-card{

padding:18px;

}

}



/*==================================================
  IFRAME
==================================================*/

.iframe-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    overflow: hidden;
}

.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* スマホ */
@media screen and (max-width: 767px) {
    .iframe-wrapper {
        padding-bottom: 95%;
    }
}