@import url('https://fonts.googleapis.com/css2?family=Meddon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&family=Noto+Serif+JP:wght@200;300;400&display=swap');

@font-face {
font-family: "Utsukushi_min";
  src: url("./Dup/img/Utsukushi_min.woff") format("woff"),url("./Dup/img/Utsukushi_min.woff2") format("woff2");
}

.font1,.hannari{
    font-family: 'Noto Sans JP',"Utsukushi_min","sans-serif";
}
.font2{
    font-family: 'Meddon', cursive;
    letter-spacing: 0;
    line-height: 1.5;
}

/*
#particles-js{
    display:none!important;
}
#wrap{
    opacity:1!important;
}
*/


/*--all page---------------------------
-------------------------------------*/

.linkStyle{
    color:#333;
    transition:all 0.3s;
    text-decoration:underline;
}
.linkStyle:hover{
    opacity:0.7;
}

:root{
    --color1:#f1a079;
}
.font_14{
    font-size:19px;
}
body{
    overflow:hidden;
}
header.scr_header{
    background-color:rgba(255,255,255,0.7)!important;
    backdrop-filter: blur(5px);
}
#pc_nav li a{
    color:#333;
}
#pc_nav li a::after{
    background:var(--color1);
}
.button_container span{
    background:var(--color1);
}
.button_container span:nth-of-type(1){
    color:var(--color1);
}
#overlay .left li{
    max-width: 100%;    
}
.tel_bt,
#overlay .right .mg_b-50px .nav_menu_more:last-of-type{
    display:none;
}
footer{
    background-color:transparent!important;
}
#footer_con h2{
    display:none;
}
header #logo{
    opacity:0;
}
header.scr_header #logo{
    opacity:1;
}
.fix_bnr{
    left:10px;
    z-index:2;
}

/*--top page---------------------------
-------------------------------------*/
/*
#main_img,#main_img::before{
    clip-path: ellipse(70% 100% at 50% -1%);
}
*/
.nayami_box li{
    padding-left:35px;
    background:url(./Dup/img/check.png) no-repeat center left/25px;
    margin-bottom:5px;
}
.nayami_box li span {
    background: linear-gradient(transparent 50%, #fbeba6 50%);
}
.bg{
    width: 100%;
    height: auto;
    top: 5%;
    left: 0;
}
.item4 {
    width: min(26vw,900px);
    top: 11.5%;
    left: 0;
}
.item5 {
    width: min(24vw,900px);
    top: 9.5%;
    right: 0;
}
.item6 {
    top: 45%;
    width: min(15vw,400px);
    left: -1%;
}
.item7{
    width: min(15vw,400px);
    right: -2%;
    top: 8%;
}
.item8{
    width:min(12vw,400px);
    right:-2%;
    top:1%;
}
.item9 {
    width: min(14vw,400px);
    bottom: -7%;
    left: -3%;
}
.item10{
    width: min(90vw,1200px);
    height: auto;
    top: 39%;
    left: -10%;
    z-index: -1;
}
.catch{
    font-size:2rem;
}
.txt_grad{
    display: inline-block;
    background: linear-gradient(135deg, #fed878 0%, #fa505e 100%);
    background: -webkit-linear-gradient(-45deg, #fed878 0%, #fa505e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.intro_subtitle,
.con_subtitle{
  font-size: 3rem;
}
.intro_bnr{
    border-radius:30px;
}
.bg2 {
    width: min(94vw,1400px);
    height: auto;
    top: 39%;
    left: 0;
    z-index: -1;
}
.bg3 {
    width: min(90vw,1200px);
    height: auto;
    top: 85%;
    right: -10%;
    z-index: -1;
}

#loop_box{
    position:relative;
    height: 600px;
}
#loop_box::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 600px;
    background-image: url(../dup/img/loop.png);
    background-size: auto 100%;
    background-position-y: 0;
    background-position-x: 0;
    background-repeat: repeat-x;
    animation: loop 30s linear infinite;
}
@keyframes loop {
	0% {background-position-x: 0;}
	100% {background-position-x: -1903px;}
}



/*--under page---------------------------
-------------------------------------*/
.page .bg{
    opacity:0.6;
}
#page_title{
    clip-path: ellipse(70% 100% at 50% -1%);
}
#page_title .page_title_box{
    background-color: rgba(241,160,121,0.8);
}
#page_title > div{
    background-position: top 27% center;
}

/* ---------- responshive ---------- */
@media screen and (max-width: 1536px){

}


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

}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/*
#main_img {
    clip-path: ellipse(85% 100% at 50% -1%);
}
*/
.nayami_box li {
    background: url(./Dup/img/check.png) no-repeat top 6px left/23px;
    letter-spacing: 1px;
}
.bg{
    top:4%;
}
.item4 {
    width: min(32vw,900px);
    top: 6%;
}

.item5 {
    width: min(31vw,900px);
    top: 6%;
}
.item7 {
    width: min(22vw,400px);
    top: 43%;
}

#loop_box,
#loop_box::before{
    height: 400px;
}
.item6 {
    top: 41%;
    width: min(23vw,400px);
}
.item7 {
    width: min(24vw,400px);
    top: 35%;
}
.item8 {
    width: min(21vw,400px);
    top: 32%;
}
.item9 {
    width: min(21vw,400px);
    bottom: -4%;
}
#page_title {
    clip-path: ellipse(85% 100% at 50% -1%);
}
.page .bg{
    top:8%;
}
#page_title .page_title_box{
    width:60%;
}
#cms_2-g .cate_title {
    line-height: 1.5;
    font-size: 2em;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.font_14 {
    font-size: 15px;
}
.bg {
    top: 7.5%;
}
.item4 {
    width: min(39vw,900px);
    top: 8.5%;
}
.item5 {
    width: min(37vw,900px);
    top: 8.5%;
}
.item6 {
    top: 48%;
    width: min(29vw,400px);
}
.item7 {
    width: min(28vw,400px);
    top: 53%;
}
.item8 {
    width: min(27vw,400px);
    top: 14%;
}
.item9 {
    width: min(30vw,400px);
    bottom: -5%;
}
.item10{
    top:75%;
}
.bg2 {
    top: 49%;
}
.bg3{
    top:99%;
}
/*
#main_img {
    clip-path: ellipse(113% 100% at 50% -1%);
}
*/
.catch {
    font-size: 1.5rem;
}
.con_subtitle {
    font-size: 2rem;
}
#loop_box,
#loop_box::before {
    height: 300px;
}
#page_title .page_title_box {
    width: 75%;
}
#cms_2-g .cate_title{
    font-size: 1.5em;
}
}