@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
.font1{
    font-family: 'Zen Maru Gothic',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

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

/*
html, body{overflow: auto}
.pp-section{position: static}
*/


/*--all page---------------------------
-------------------------------------*/
#body{
    overflow:hidden;
}
header .nav_bg{
    border-radius: 40px
}
header .nav_bg.trans{
    border-radius:0;
}
#logo2{
    width:300px;
}
footer > div::before{
    width:20vw;
    height:15vh;
    background-image:url(./Dup/img/cloud.png);
    top:0;
    left:0;
    z-index:1; 
    animation: slide 3s infinite ease-in-out .8s alternate;
    display: inline-block;
    transition: 2s ease-in-out;       
}

/*--top page---------------------------
-------------------------------------*/
#wrap,
.custom_wrap,
#intro,
#top_cms,
footer{
    background-image:url(./Dup/img/bg.jpg);
    background-size:auto;
    background-repeat:repeat;
}
.main_img{
    top:0;
    right:0;
    width:80vw;
    height:100vh;
    z-index:1;
}
.catch{
    top: 50px;
    left: 0;
    width: 30vw;
    height: 18vh;
    z-index: 2;
}
.main_item{
    bottom:40px;
    right:-50px;
    width:23vw;
    height:17vh;
    z-index:2;
}
.main_item2{
    top:300px;
    left:80px;
    z-index:1;
}
.main_item2 p{
    font-size: 1.2rem;
    font-weight: bold;
    padding-left: 20px;
    line-height: 2.5;
}
.main_item2 .main_img_logo{
    padding-top:20px;
}
.main_item2 .main_img_logo img{
    width:350px;
}
.main_illust{
    bottom: 0px;
    left: -30px;
    width: 25vw;
    height: 30vh;
    z-index: 2;
}
#intro .inner::before,
#intro .inner::after,
#contents .inner::before,
#contents .inner::after,
#page_title::before,
footer > div::before{
    content:'';
    position:absolute;
    display:block;
    background-repeat:no-repeat;
    background-size:contain;

}
#intro .inner::before{
    width:20vw;
    height:15vh;
    background-image:url(./Dup/img/cloud.png);
    top:0;
    left:0;
    z-index:1; 
    animation: slide 3s infinite ease-in-out .8s alternate;
    display: inline-block;
    transition: 2s ease-in-out;    
}
#intro .inner::after{
    width:20vw;
    height:15vh;
    background-image:url(./Dup/img/main_item.png);
    bottom:3%;
    right:0;
    z-index:2;
    animation: slide2 3s infinite ease-in-out .8s alternate;
    display: inline-block;
    transition: 2s ease-in-out;    
}

.intro_img1{
    border-radius: 50%;
    width: 33vw!important;
    top: 1%;
    left: 7%;
}
.intro_img2{
    border-radius: 50%;
    width: 18vw!important;
    bottom: 4%;
    left: -5%;
}
.intro_img3{
    border-radius: 50%;
    width: 24vw!important;
    bottom: 11%;
    right: 2%;
}
#contents{
    background-image: url(./Dup/img/con_bg.png),url(./Dup/img/bg.jpg);
    background-repeat: no-repeat,repeat;
    background-position: top right,top left;
    background-size: 70% 100%,auto;
}
#contents .inner::before{
    width:20vw;
    height:15vh;
    background-image:url(./Dup/img/cloud.png);
    bottom:3%;
    left:0;
    z-index:2;
    animation: slide2 3s infinite ease-in-out .8s alternate;
    display: inline-block;
    transition: 2s ease-in-out;       
}
#contents .inner::after{
    width:20vw;
    height:15vh;
    background-image:url(./Dup/img/main_item.png);
    top:1%;
    right:0;
    z-index:1; 
    animation: slide 3s infinite ease-in-out .8s alternate;
    display: inline-block;
    transition: 2s ease-in-out;    
}
.con_img{
    border-radius: 50%;
    width: 47vw;
    top: 3%;
    left: 2%;
    z-index: 1;
}
.ellipsis{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
   max-height: 150em;
  -webkit-line-clamp: 10;
  line-height: 1.5em;
}

/*top animation*/
@keyframes slide{
    0% {
    transform: translate(0, -5px);
    }
100% {
    transform: translate(0, 5px);
    }
}
@keyframes slide2{
    0% {
    transform: translate(0, 5px);
    }
100% {
    transform: translate(0, -5px);
    }
}

/*--under page---------------------------
-------------------------------------*/
#page_title{
    background-color: #5e5548;
}
#page_title::before{
    width:20vw;
    height:15vh;
    background-image:url(./Dup/img/main_item.png);
    bottom: -13%;
    right:0;
    z-index:2;
    animation: slide2 3s infinite ease-in-out .8s alternate;
    display: inline-block;
    transition: 2s ease-in-out;    
    }
#page_title .title_bg{
    background-position: top 30% center;
}

.cms_5-c .box_title1,
#cms_5-c .box_title1{
    background-color: #fff;
    padding-left: 80px;
}
.cms_5-c .box_title1::before,
#cms_5-c .box_title1::before{
    color:white;
    z-index:1;
    top:3px;
}
.cms_5-c .box_title1::after,
#cms_5-c .box_title1::after{
    content: '';
    position: absolute;
    display: block;
    width: 70px;
    height: 70px;
    background-color: #E45826;
    border-radius: 35px;
    z-index: 0;
    top: -7px;
    left: -13px;
}


/* ---------- responshive ---------- */
@media screen and (max-width: 1370px){
.main_img{
    width:85vw;
} 
.main_item2{
    top:43%;
}
}

@media screen and (max-width: 1290px){
.main_illust {
    bottom: -1%;
    width: 35vw;
}
}

@media screen and (max-width: 1110px){
.main_img{
    width:93vw;
}
.catch{
    width:30vw;
}    
.main_item2{
    left:30px;
}
.main_illust{
    left:30px;
    width:40vw;
}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#menu_stick, header .nav_bg{
    top:10px;
    right:10px;
}
.main_img{
    width:100vw;
    height:auto;
}
.catch{
    top: auto;
    bottom: 28%;
    width: 57vw
}
.main_item{
    right:0;
    bottom: auto;
    top: 3%;
    width: 33vw
}
.main_item2{
    top: auto;
    bottom: 5%;
    left: 30px
}
.main_item2 .main_img_logo{
    padding-top:0;
}
.main_illust{
    bottom: 0;
    left: auto;
    right: 0;
    width: 50vw;
}
#intro .inner::before {
    width: 35vw;
}
#intro .inner::after {
    width: 35vw;
    bottom: 23%;
}
    
#intro .intro_right {
    height: 80vw!important;
}
.intro_img1{
    width:55vw!important;
    top: -10%;
    left: 13%;
}
.intro_img2{
    width:40vw!important;
    bottom: -5%;
    left: 5%;
}
.intro_img3{
    width:40vw!important;
    bottom: 81px;
    right: 2%;
}
#contents{
background-image: url(./Dup/img/con_bg_tb.png),url(./Dup/img/bg.jpg);
    background-position: top left,top left;
    background-size: 100% 80%,auto;
}
#contents .inner::before {
    width: 35vw
}
.con_img{
    width:80vw;
    left: 0;
    right: 0;
    margin: auto;
    margin-bottom:50px;
}
footer > div::before{
    width:35vw;
    top:-3%;
}
#page_title::before {
    width: 30vw;
    bottom:-25%;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
html, body {
    font-size: 16px;
}
.catch{
    width:80vw;
    bottom:31%;
}
.main_item{
    width:50vw;
}
.main_item2{
    bottom: 5%;
    left: 10px
}
.main_item2 p{
    font-size:1rem;
}
.main_item2 .main_img_logo img {
    width: 250px;
}
.main_illust{
    width: 65vw;
    bottom: 1%;
}
#intro .inner::before {
    width: 45vw;
}
#intro .inner::after{
    width:37vw;
    bottom:13%;
}
#contents {
    background-image: url(./Dup/img/con_bg_sp.png),url(./Dup/img/bg.jpg);
}
#contents .inner::before {
    width: 38vw;
    bottom:1%;
}
.intro_img2{
    bottom:-12%;
}
footer > div::before {
    width: 45vw;
}
footer .tel_bt{
    text-align:center;
}
#page_title::before {
    width: 40vw
}
.cms_5-c .box_title1::before,
#cms_5-c .box_title1::before{
    left:10px;
    top: 5px;
}
.cms_5-c .box_title1::after,
#cms_5-c .box_title1::after{
    width: 60px;
    height: 60px;
    border-radius: 30px;
    top:-4px;
    left: -13px;
}
.cms_5-c .box_title1, 
#cms_5-c .box_title1{
    padding-top:25px;
    padding-right:25px;
    padding-left: 60px;
    padding-bottom:20px;
}
.cms_5-c .box_txt1,
#cms_5-c .box_txt1{
    margin-left:20px;
    
}
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){
#contact_tel a{
    padding-top:35px;
}
.cms_5-c .box_title1, 
#cms_5-c .box_title1{
    padding:10px 15px 3px 70px;
}
/*
.cms_5-c .box_title1::after, 
#cms_5-c .box_title1::after{
    top:-7px;
}
*/
}