@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap');
#intro .font_en,#contents .font_en,.top_cms_title h4 span{font-family: 'Balsamiq Sans', cursive;}


/*all page------------------------------------------------*/
#main_menu li a{color:#333;}
#header h1 img{width:70%;}
body{background-color:white!important;}
body::before{
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(253, 213, 75, 0.63) 2px, rgba(253, 213, 75, 0.63) 15px );
}
#footer{background-color:orange;}
#footer .grid_6:first-of-type { background-color: rgba(255,255,255,0.05);}
#footer .grid_6:nth-of-type(2) { background-color: rgba(255,255,255,0.10);}
#footer h3 span,.footer_menu li a,#copyright{color:white;}
#page-top{background-color:#00b6d2;}
.linkStyle{color:#f39f5d;}
#contents_link h4{font-family: 'Balsamiq Sans', cursive;}
#contents_link a::after{background-color: rgba(38,78,84,0.57);}
#page-top{border-radius:8px 0 0 0;}

/*cursor*/
body{
  position: relative;
  cursor: none; /*もともとあるカーソルは非表示に*/
}
a{
  display:inline-block;
  /*margin:40px;*/
}
/*カーソル要素*/
#cursor{
  position: fixed;
  /*丸の大きさと色の指定*/
  background: #fff;
  border-radius:10px;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;/*真ん中にくるようにマイナスマージンで調整*/
  z-index: 9998;/*一番手前に来るように*/
  pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
  opacity: 0;
  transition: transform 0.1s;/*アニメーションの秒数指定*/
}
/*ちょっと遅れてついてくるストーカー要素*/
#stalker{
  position: fixed;
  /*丸の大きさと色の指定*/
  background: #00b6d2;
  width: 60px;
  height: 60px;
  border-radius:30px;
  margin: -30px 0 0 -30px;/*真ん中にくるようにマイナスマージンで調整*/
  z-index: 9997;/*カーソルの後ろに来るように*/
  pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
  opacity: 0;
  transition: transform 0.5s;/*アニメーションの秒数指定*/
}
#cursor.active,
#stalker.active{
  transform: scale(1.4);
}



/*top page------------------------------------------------*/
header { border-bottom: 1px solid #f39f5d;}
#main_img .item5{
    bottom:-50px;
    left:-100px;
    z-index:3;
    animation: rotate-anime 30s linear infinite;
}

@keyframes rotate-anime {
  0%  {transform: rotate(0);}
  100%  {transform: rotate(360deg);}
}
#main_img .box_img{border-radius:30px 0 0 30px;}
/*#main_contents{border-bottom: 1px solid #f39f5d;}*/
#catch h2 span{border-radius: 10px 10px 0 0;}
#main_contents::before{
    content:'';
    position:absolute;
    display:block;
    width:18vw;
    height:15vh;
    background-image:url(./Dup/img/item4.png);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:top left;
    top:0;
    left:0;
    z-index:2;
    
}
#main_contents #main_menu li.active::before{background-color:#f39f5d;}
#main_contents #main_menu li::after {border-bottom: 1px solid #f39f5d;}
#main_contents #main_menu li::before {border: 2px solid #f39f5d;}
#main_contents #main_img{box-shadow:none;}
#main_contents::after{display:none;}
.top_cms_title{color:#333!important;}
#intro{
    position:relative;
    padding-top:50px;
}
#intro h2,#intro .font_en{text-align:center;}
#intro .font_en{color:orange;}
#intro h2{font-size:28px;}
#intro .item2{
    top:0;
    text-align:center;
}
#intro .item2 img{width:auto;}

#intro::after{background-color: rgba(135,208,208,0.1);}
#intro .width_1280-max{
    background-color:white;
    color:#555;
    padding:30px 50px;
    border: 5px solid #00b6d2;
    border-radius: 20px;
    max-width: 1000px;
}
#intro .more a{
    background-color: #00b6d2;
    border:0;
    border-radius:8px;
}
#intro .more a:hover{
    background-color:orange;
    transition:all 0.3s ease;
    transform:translateY(-3px);
}
#contents{padding-top:70px;}
#contents::after{background-color:transparent;}
#contents span{position:relative;}
#contents span::before{
    content:'';
    position:absolute;
    display:block;
    width:7vw;
    height:10vh;
    background-image:url(./Dup/img/item3.png);
    background-repeat:no-repeat;
    background-size:contain;
    top:-130%;
    left:0;
    right:0;
    margin:0 auto;
    z-index:2;    
    background-position: bottom;
}
#contents .con_box{
    position:relative;
    background-color:white;
    border-radius: 20px;
}
#contents .con_box::before{
    position:absolute;
    display:block;
    font-family: 'Balsamiq Sans', cursive;
    font-size:5rem;
    color:orange;
    z-index:2;
    top:-80px;
    left:0;
    right:0;
    text-align:center;
}
#contents .con_box1::before{
    content:'01';
}
#contents .con_box2::before{
    content:'02';
}
#contents figure { 
    box-shadow:none;
    border-radius: 20px;
}
#contents h3 span{
    color:orange;
    border-top: 0;
}
#contents p{color:#555;}
.bnr3 a{
    width:820px;
    margin:auto;
}
#top_cms .top_cms_box{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    border-radius: 20px;
}
#top_cms .top_cms_title h3 span{font-size:25px;}
#top_cms .top_cms_title h4 span{color:orange;}
#top_cms .cms_wrap{border-radius:0 20px 20px 0;}
#top_cms .more a {
    background-color: #00b6d2;
    color: white;
    font-family: 'Balsamiq Sans', cursive;
    border:0;
    border-radius:10px;
    font-size: 15px;
}
#top_cms .more a:hover{
    background-color: #f7c451;
    transition:all 0.3s ease;
    transform:translateY(-3px);
}

/*under page-----------------------------------------*/
#page_title,#page_title.active::after{border-radius: 20px 0 0 20px;}
#page_title h3{font-family: 'Balsamiq Sans', cursive;}
#page_title h2 span{font-size: calc(2rem + 5px);}
.cate_list li{border-radius:5px;}
.cate_list li a span{
    background-color: #f7c451;
    font-family: 'Balsamiq Sans', cursive;
}
/*page8*/
#contact_tel a,.contact_box a{border-radius:10px;}
#tel_txt{
    background-color: white;
    padding: 30px;
    border-radius: 20px;
}
/*page9*/
.privacy_box h3 span{border-radius:8px;}

/*page10*/
#page10 .d_flex .grid_4{background-color: orange;}
#page10 .d_flex .grid_4 a{border-radius:10px;}
#page10 .d_flex >div:first-child .gird_4{border-radius:10px 0 0 0;}
#page10 .d_flex .font_14{font-family: 'Balsamiq Sans', cursive;}

/* ---------- reponsive ---------- */
@media screen and (max-width: 1280px){
    #top_cms .cms_wrap{border-radius:0;}
}
@media screen and (max-width: 1050px){
    #main_img .item5{display:none;}
    #contents span::before{width:10vw;}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    body{cursor:auto;}
    #header h1 img {width: 100%;}
    #main_contents::before{width: 33vw;}
    #intro h2 {
    font-size: 27px;
    line-height: 1.5;
    }
    #contents span::before {
    width: 18vw;
    top: -165%;
    }
    #menu_bt{border-radius: 0 0 0 10px;}
    #main_nav #menu_bg::after{background-color: rgba(38,78,84,0.57);}
    #footer .d_flex h3{font-size:2rem;}
    #page10 .d_flex .grid_4 .font_24{font-size:20px;}
    .bnr3 a{width:400px;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    #main_contents::before {width: 50vw;}
    #catch{text-align:right; }
    #catch h2{
        font-size:19px;
        letter-spacing: 0;
    }
    #catch h2 span {border-radius: 10px 0 0 0;}
    #intro .width_1280-max{padding:30px;}
    #intro .item2 img { width: 30%;}
    #intro h2 {font-size: 21px;}
    #intro .more a{font-size:18px;}
    #contents span::before{top: -140%;}
    #contents .con_box::before{
        font-size: 4rem;
        top: -60px;
    }
    #contents_link h3{font-size:19px;}
     #contents_link a span{text-align:center;}
     #page_title{margin-right:0;}
     #page_title h2 span {font-size: calc(2rem - 7px);}
     .bnr3 a{width:300px;}
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){

}