@charset "UTF-8";

/*  Mobile Menu ▼▼
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ */

/*　Burger Buttan ▼▼ */
.hamburger {
display : none;
position: relative;
text-align: center;
margin: 0px auto;
z-index: 100;
    padding: 10px 0 8px;
    background: linear-gradient(0deg, rgba(238, 134, 171, 1), rgba(233, 82, 142, 1));
border-bottom: solid 1px #FFFFFF;
}

.hamburger.active{
background-color: rgba(255,255,255,0);
border-bottom: solid 1px #FFFFFF;
}


.hamburger span {
display : block;
position: absolute;
width   : 22px;
height  : 2px ;
left: 6px;
background : #555;
-webkit-transition: 0.3s ease-in-out;
-moz-transition   : 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

.hamburger span:nth-child(1) {top: 8px;}
.hamburger span:nth-child(2) {top: 16px;}
.hamburger span:nth-child(3) {top: 24px;}
/*　Burger Buttan ▲▲ */

/* button when the navigation system is open ▼▼ */

.hamburger.active span:nth-child(1) {
top : 16px;
left: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform   : rotate(-45deg);
transform: rotate(-45deg);
}
.hamburger.active span:nth-child(2) {
left: 60%;
opacity: 0;
-webkit-animation: active-btn17-bar02 .8s forwards;
animation: active-hamburger-bar02 .8s forwards;
}
@-webkit-keyframes active-hamburger-bar02 {
  100% {
height: 0;
  }
}
@keyframes active-hamburger-bar02 {
  100% {
height: 0;
  }
}
.hamburger.active span{
background-color: #fff;
}

.hamburger.active span:nth-child(3) {
top: 16px;
-webkit-transform: rotate(45deg);
-moz-transform   : rotate(45deg);
transform: rotate(45deg);
}
/*
.hamburger::after {
position: absolute;
top: 105%;
left: 100%;
display: block;
content: '';
width: 45px;
height: 45px;
margin: -45px 0 0 -43px;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0);
transition: all .75s;
}
.hamburger.active::after {
border: 2px solid #fff;
}
*/
/* button when the navigation system is open ▲▲ */


nav.globalMenuSp {
position: fixed;
z-index: 2;
top: 43px;
right: 0;
color: #fff;
background: linear-gradient(0deg, rgba(238, 134, 171, 1), rgba(233, 82, 142, 1));
text-align:s center;
transform: translateX(100%);
transition: all 0.6s;
width: 100%;
max-width: 100%;
height: 100vh;
padding-top: 2em;
}

nav.globalMenuSp ul {
margin: 0 auto;
padding: 0;
width: 100%;
border-right: none;
}

nav.globalMenuSp ul li {
list-style-type: none;
padding: 0;
width: 100%;
border-bottom: 1px solid #fff;
border-left:none; 
    background: linear-gradient(0deg, rgba(238, 134, 171, 1), rgba(233, 82, 142, 1));
}
nav.globalMenuSp ul li:last-child {
padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
background :#ddd;
}
nav.globalMenuSp ul li:hover a{
background: linear-gradient(0deg, rgba(238, 134, 171, 1), rgba(233, 82, 142, 1));
}

nav.globalMenuSp ul li a {
display: block;
color: #fff;
padding: 1.4em 0;
text-decoration :none;
width: 100%;
text-align: center;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
transform: translateX(0%);
z-index: 50;
}

.spmenuop .bk_spmenu{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.6;
transition: all .75s;
z-index: 10;
}
/* ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
    Mobile Menu ▲▲ */
    
    
    
    
    .site-content-contain,#content{display: none;}
    
    body{background-image: url(../images/cropped-crcr-webtop07.jpg); background-size: cover; }
    .main-content{
        position: relative;
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/newsback01.jpg);
        background-size: cover;
        background-attachment: fixed;
    }
    .main-content .wrap{padding: 0; margin: 0 auto;}
    
    .fb-root{display: none;}
    
    .site-branding,.site-header{display: none;}
    .menu-%e3%83%88%e3%83%83%e3%83%97%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc-container{max-width: 1000px; width: 100%;}
    
    .mainlogo{width: auto;
    height: 100%;
    object-fit: cover;
    text-align: center;}
    
    .navigation-top {
        bottom: auto;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 7;
        background: linear-gradient(0deg, rgba(238, 134, 171, 1), rgba(233, 82, 142, 1));
        font-weight: 400;
        line-height: 1.5;
        font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
    }
    .navigation-top a{color: #FFFFFF;}
    .navigation-top .wrap {
        margin: 0 auto; text-align: center; padding: 0;
        max-width: 1200px;
        padding: 0.75em 2em;
    }
    
    .main-box{
        width: 100%;
        max-width: 1030px;
        padding: 120px 15px 50px;

    }
    .news{
        background-image: url(../images/crcr-webtop-back5.jpg);
        padding: 20px 35px 50px;
        position: relative;
    }

    .news .news-title{
        width: 100%;
        margin: 0 auto;
        max-width: fit-content;
    }
    
    .news .news-title img{margin: 0 auto;}

    .news .news-title p{margin: 20px 0 50px; text-align: center;}

    .news h1{
        font-size: 26px;
        background: linear-gradient(0deg, rgba(238, 134, 171, 1), rgba(233, 82, 142, 1));
        border-radius: 5px;
        width: 100%;
        text-align: center;
        padding: 5px;
        color: #FFFFFF;
        margin: 0 0 20px;
    }
    .news h1 br{display: none;}

    .news .features{display: flex; margin: 0 0 20px;}
    .news .features-no3 {margin: -20px 0 -48px; z-index: 2; position: relative;}
    .news .features .img-box{max-width: 590px; width: 100%;}
    .news .features .img-box img{vertical-align: bottom;}
    .news .features .text-box01{
        max-width: 310px;
        width: 100%;
        padding: 10px 15px;
    }
    .news .features .text-box02{
        width: 100%;
        padding: 10px 15px;
        text-align: center;
    }
    .news .features .text-box-no03{
        height: max-content;
        margin: 2.1% 0 0;
    }
    .news .features .text-box-no04{
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .news .features .text-bg{background-image: linear-gradient(45deg, rgba(252, 242, 245, 1), rgba(251, 220, 232, 1));}

    .news .features .midashi{display: inline-flex; margin: 0 0 10px; align-items: center;}
    .news .features .midashi img{margin: 0 5px 0 0; height: 100%;}

    .news .features h2{color: #E4007F; font-size: 20px; line-height: 1.2; margin: 0; padding: 0;}
    .news .features p{line-height: 1.5; margin: 0; font-size: 0.9em;}

    .news .features .font30{font-size: 30px; font-weight: bold;}
    .news .features .pink{color: #E4007F;}

    .news .pc{display: block;}
    .news .sp{display: none;}
    
    
    .news-footer{background-color: #000000;
    text-align: center;
    color: #FFFFFF;
    font-size: 0.8em;
    padding: 8px 0 5px;}
    
    .menu-toggle{color: #FFFFFF;}
    
    @media screen and (min-width: 48em){
        .site-info {
            float: none;
            padding: 1em 0 0;
            width: 100%;
        }
        .main-navigation a{padding: 0.8em 0.8em 0.8em 0;}
        .page:not(.home) #content{
            padding: 0;
        }
    }
    
    @media screen and (max-width: 870px){
        .news .features {align-items: center;}
        .reverse{flex-direction:column-reverse;}
        .column{flex-direction: column;}
        .news .features .text-box01{max-width: 590px;}
        .news h1{font-size: 20px;}
        .news .features h2 br{display: none;}
        .news .sp{display: block; margin: 0 auto;}
        .news .pc{display: none;}
        .news .features-no3{margin: 0;}
        .news .features .text-box-no03 {height: auto; margin: 0 0 20px; position: relative; z-index: 1;}
        .aki-70{margin: 0 0 -7vw;}
        .news .features .img-box { position: relative; z-index: 2; }
    }
    @media screen and (max-width: 767px){
        .navigation-top .wrap{display: none;}
        .hamburger {display : block;}
        .main-box{padding: 20px 15px 50px;}
    }
    
    @media screen and (max-width: 610px){
        .news .features h2 br{display: block;}
    }
    
    @media screen and (max-width: 480px){
        .news h1 br{display: block;}
    }
      

 .infotel{
    border: solid 2px #ff0080;
    background-color: #fff;
    padding: 0.5em 4em;
    display: table;
    margin: 0 auto 50px !important;
}

 .infotel span{
white-space: nowrap;
}


    @media screen and (max-width: 520px){

 .infotel{
  width: 100%;
    padding: 0.5em;
font-size: 0.9em;
}


 }