@charset "UTF-8";

:root {
  --main-blue: #0078c5;
  --sub-blue: #D9EBF7;
  --sub-blue-40: rgba(217, 235, 247, 0.4); 
  --mk-blue: #123556;
  --text-color: #333333;
  --base-color: #FAFAFA;
  --step-color01: #83CCFE;
  --step-color02: #65BBF6;
  --step-color03: #49ACEF;
  --step-color04: #2D9CE7;
  --step-color05: #178CD7;
  --step-color06: #0E83CE;
  --step-color07: #0078c5;
  --mg-green: #378E79;
  --white: #ffffff;
}

/*---------------
マグノゲート特設ページ
---------------*/
.page-header-mg-gate{
   display: none; 
}
.breadcrumb.main-inner{
    display: none;
}
main{
    margin-top: 0;
}
.mg-gate-title-inner .breadcrumbs a{
    color: white;
}
#mg-gate figure img{
    width: 100%;
}
.mg-w-balloon{
    width: fit-content;
    background-color: white;
    border-radius: 50px;
    padding: 8px 30px;
    font-weight: bold;
}
.mg-gate-title-inner{
    max-width: 1100px;
}
.mg-gate-title-inner h2{
    font-size: clamp(30px,6vw,60px);
    font-weight: bold;
}
.mg-title-wrap .mg-w-balloon{
    padding: 10px 30px;
    margin-left: 0!important;
    font-weight: bold;
}
@media (max-width: 781px){
    .mg-title-wrap .mg-w-balloon{
        padding: 5px 15px;
    }
    .mg-title-wrap{
        background-image: linear-gradient(to right, rgba(55, 142, 121, 1), rgba(55, 142, 121, 0.4)), 
            url("../images/images/mg-gate-title-sp.jpg") !important;
        background-size: cover;
        background-position: center center;
    }
}
.mg-title-wrap > div a{
    font-weight: bold;
}
.mg-title-h2p{
    font-size: clamp(18px,4vw,22px);
    font-weight: bold;
    letter-spacing: 0.3rem;
}
.mg-title-h2p span{
    display: inline-block;
    position: relative;
    font-size: clamp(26px,4vw,30px);
    font-weight: bold;
    margin: 0 10px;
}
.mg-title-h2p span::before,.mg-title-h2p span::after{
    content: "";
    position: absolute;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    top: -10px;
    width: 18px;
    height: 13px;
}

.mg-title-h2p span::before{
    left: 0;
    margin-left: -15px;
    background-image: url(../images/images/mg-triangle-l.png);

}
.mg-title-h2p span::after{
    background-image: url(../images/images/mg-triangle-r.png);
    right: 0;
    margin-right: -15px;
}
@media (max-width: 767px){
    .mg-title-h2p span::before,.mg-title-h2p span::after{
        top: -5px;
        width: 15px;
        height: 10px;
    }
    .mg-title-h2p span::before{
    margin-left: -10px;

    }
    .mg-title-h2p span::after{
    margin-right: -10px;
    }
}
@media (max-width: 536px){
    .mg-title-wrap .wp-block-group.is-horizontal.is-layout-flex.wp-block-group-is-layout-flex{
        gap: 10px;
    }
}
.mg-gate-videowrap{
    max-width: 670px!important;
    margin: 0 auto;
    padding-bottom: 50px;
}

.mg-mode-wrap,
.mg-cta-wrap{
    background-color: #f0f7f2;
    background-image: repeating-linear-gradient(
    -45deg, 
    rgba(206, 231, 212, 0.5), 
    rgba(206, 231, 212, 0.5) 4px, 
    transparent 4px, 
    transparent 8px
  );
}
@media (max-width: 992px) {
    #mg-gate .wp-block-group.is-layout-constrained,
    #mg-gate .wp-block-media-text.is-stacked-on-mobile {
        max-width: 100%;
        padding-left: 5%;
        padding-right: 5%;
    }
    #mg-gate .wp-block-group.alignfull.mg-title-wrap.has-background.is-layout-constrained.wp-block-group-is-layout-constrained,
    #mg-gate .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile,
    #mg-gate .wp-block-media-text.is-stacked-on-mobile,
    #mg-gate .wp-block-columns.mg-3point.is-layout-flex.wp-container-core-columns-is-layout-28f84493.wp-block-columns-is-layout-flex,
    #mg-gate .wp-block-columns.mg-3places.is-layout-flex.wp-container-core-columns-is-layout-28f84493.wp-block-columns-is-layout-flex{
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 0;
    }
}
/*共通h2デザイン*/
.mg-h2{
    padding-top: clamp(60px,8vw,120px);
    font-size: clamp(18px,4vw,23px);
    font-weight: bold;
}
/*共通P（大）タグデザイン*/
.mg-p{
    padding-bottom: clamp(30px,8vw,60px);
    font-size: clamp(24px,4vw,36px);
    font-weight: bold;
}

/*こんなお悩みありませんか？*/
.mg-problem {
    position: relative;
}
.mg-problem::before{
    content: "";
    position: absolute;
    width: 80%;
    height: 2px;
    border-top: 2px dashed var(--mg-green);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.mg-problem .wp-block-columns > div{
    border: 2px solid var(--mg-green);
    border-radius: 20px;
    text-align: center;
    padding: 20px;
}
.mg-problem .wp-block-columns figure{
    margin-top: 0;
}
.mg-problem .wp-block-columns h3{
    color: var(--mk-blue);
    font-weight: bold;
    font-size: clamp(16px,4vw,26px);
}
.mg-problem .wp-block-columns p{
    margin-top: 10px;
}
/* @media (max-width: 781px){

} */
/*２つのモード*/

.mg-mode-wrap > div h3{
    margin-top: 20px;
    margin-bottom: 0;
    padding-bottom: 30px;
    font-size: clamp(24px,4vw,34px);
    font-weight: bold;
}
.mg-mode-wrap .wp-block-media-text__content p:last-of-type{
    font-size: clamp(16px,4vw,17px);
    font-weight: bold;
    letter-spacing: 0.1rem;
}
.mg-mode-wrap .wp-block-media-text__content{
   padding: 0; 
}
.mg-mode-wrap .wp-block-media-text{
    gap: 60px;
}
.mg-mode-wrap ul{
    padding-left: 0;
}
.mg-mode-wrap ul li:before{
    content: "";
    display: inline-block;
    width: 20px;
    height: 16px;
    background-image: url(../images/images/mg-check.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px;
}
.mg-mode-wrap ul li{
    font-size: clamp(16px,4vw,20px);
    font-weight: bold;
    margin: 5px;
    letter-spacing: 0.2rem;
}
.mg-mode-wrap div.mg-3point > div{
    background-color: white;
    text-align: center;
    border-radius: 20px;
    padding: 20px;
}

.mg-mode-wrap div.mg-3point div h2{
    font-weight: bold;
    margin-top: 0;
}
.mg-mode-wrap div.mg-3point div p{
    margin-top: 0;
}
.mg-mode-wrap div.mg-3point{
    padding-bottom: clamp(30px,8vw,60px);
}
@media (min-width: 601px) and (max-width: 900px){
    .mg-mode-wrap .wp-block-media-text{
        gap: 20px;
    }
}
@media (max-width: 600px) {
    .mg-mode-wrap .wp-block-media-text{
        gap: 30px;
    }
    .mg-mode-wrap .wp-block-media-text figure{
        padding: 0 10%;
    }
    .mg-mode-wrap .mg-w-balloon{
        margin: 0 auto;
    }
}
/*シートバリエーション*/
.mg-sheet .mg-p{
    padding-bottom: 0;
}
.mg-sheet > p{
    font-weight: bold;
}
.mg-sheet > div{
    gap: 15px;
    padding-top: clamp(30px,8vw,60px);
    padding-bottom: clamp(20px,8vw,40px);
}
.mg-sheet > div > div {
    border-radius: 20px;
    text-align: center;
    padding: 20px;
}
.mg-sheet > div > div h2{
    margin: 0;
    font-size: clamp(18px,4vw,22px);
    font-weight: bold;
}
.mg-sheet > div > div p{
    padding: 0;
    margin: 0;
}
@media (max-width: 781px) {
    .mg-sheet .wp-block-columns {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 10px;
    }
    .mg-sheet .wp-block-columns > .wp-block-column {
        flex-basis: 48% !important;
        flex-grow: 0;
        margin: 0;
    }
    .mg-sheet > div > div{
        padding: 10px;
    }
}
/*導入シーン*/
.mg-place .mg-p{
    padding-bottom: 10px;
}
.mg-place .mg-3places{
    padding-bottom: clamp(30px,8vw,60px);
}
.mg-place .mg-3places div{
    border-radius: 20px;
    padding: 20px;
    text-align: center;
}
.mg-place .mg-3places .wp-block-cover{
   padding-bottom: 10px; 
}
.mg-place .mg-3places .wp-block-cover__inner-container,
.mg-place .mg-3places .wp-block-cover__inner-container h3{
    margin: 0;
    padding: 0;
}
 .mg-place .mg-3places .wp-block-cover__inner-container h3 {
    -webkit-text-stroke: 3px white;
    paint-order: stroke fill;
    stroke-linejoin: round;
    color: #ffffff;
    font-weight: bold;
}
/*ご利用にあたっての注意点*/
.mg-notes{
    padding: 80px 0;
}
.mg-notes h2{
    font-weight: bold;
    font-size: clamp(20px,4vw,28px);
}
.mg-notes ul{
    padding-left: 50px;
}
.mg-notes ul li{
    list-style: disc;
    font-size: clamp(14px,4vw,18px);
}
@media (max-width: 500px) {
    .mg-notes ul{
    padding-left: 30px;
    }
}
/*CTAセクション*/
.mg-cta-wrap {
    padding: 80px 0;
}
.mg-cta-wrap h2{
    font-weight: bold;
    letter-spacing: 0.2rem;
    line-height: 50px;
    padding-bottom: 30px;
}
.mg-cta-wrap h2 span{
    font-weight: bold;
    letter-spacing: 0.2rem;
    font-size: clamp(28px,4vw,36px);
}
.mg-cta-wrap > p{
    font-size: clamp(16px,4vw,18px);
}
@media (max-width: 500px) {
    .mg-cta-wrap h2{
        line-height: 40px;
    }
}