﻿html {font-size: 120%;}
.hasu {
    margin-top: -50%;
}@font-face {
font-family: "Utsukushi_min";
  src: url("./Dup/img/Utsukushi_min.ttf") format("ttf"),url("./Dup/img/RM1c_b.eot") format("eot"),url("./Dup/img/Utsukushi_min.woff") format("woff"),url("./Dup/img/Utsukushi_min.woff2") format("woff2");
}
.font1,#main_menu .menu_title,.cms_title h2{font-family: "Utsukushi_min","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;}

/*----all page-----------------------------------------------------------------*/
#fakeloader .fl{max-width:500px!important;}
#wrap{
    background-image:url(./Dup/img/bg1r.png),url(./Dup/img/bg2r.png);
    background-repeat:no-repeat,no-repeat;
    background-position:top 25% left,top 50% right;
    /*/*background-attachment:fixed;*/
}
#logo{margin-left:17%;}
#logo img{
    display:block;
    width:530px;
}
/*header txt*/
.header .font_4dw .d_inline_b{color:#333;}
.header .pd_5px a{color:#333;}

/*header tel*/
.header .grid_3 > div a:nth-of-type(2){
    font-size: 23px;
    font-weight: bold;
}

/*footer tel*/
.foot_tel_bt a:nth-of-type(2){
    font-size: 23px;
    font-weight: bold;
}
#main_menu .menu_title{font-weight:bold;}
#main_menu.fixed{background-color: rgba(255,255,248,0.7);}
.menu_title,.menu_sub_title{color:#333;}
#f_menu ul li a{color:#333;}
#page-top{right:15px;}
#page-top a{background-color:transparent!important;}
.linkStyle{color: #2aa77e;}
#main_menu .menu_sub_title{display:none;}
footer #logo2 img{max-width:500px;}


/*----top page-----------------------------------------------------------------*/
#main_img{
    height:70vh;
    overflow:hidden;
}
.catch1{
    top: 37%;
    left: 26%;
    z-index: 2;
}
.catch2{
    top: 26%;
    right: 22%;
    z-index: 2;
}
.catch1 img,.catch2 img{width:auto;}
.ball{
  animation: ball 0.6s alternate infinite;
  -webkit-animation: ball 0.6s alternate infinite;
  -moz-animation: ball 0.6s alternate infinite;
}
@keyframes ball{
  0%   { transform:translate(0%, 0%) rotateX(12deg); }
  100% { transform:translate(0%, -10px); }
}
@-webkit-keyframes ball{
  0%   { -webkit-transform:translate(0%, 0%) rotateX(12deg); }
  100% { -webkit-transform:translate(0%, -10px); }
}

@-moz-keyframes ball{
  0%   { -moz-transform:translate(0%, 0%) rotateX(12deg); }
  100% { -moz-transform:translate(0%, -10px); }
}

/*ローディング後にフェードイン*/
.load-fade {opacity : 0; transition : all 2s/*処理にかかる時間*/;}
.load-fade.done{opacity : 1; transform : translate(0, 0);}

.hasu{
    margin-top:-12%;
    position:relative;
    z-index:2;
}
.hasu img{width:90vw;}
#aisatsu{
    position:relative;
    margin-top:2%;
}
#aisatsu::before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(89,166,187,0.5);
    top:0;
    left:0;
    z-index:1;
}
#aisatsu > div{
    position:relative;
    z-index:2;
}
.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.97);
  }
}
#oshirase{background:url(./Dup/img/ame.png);}
#oshirase .item2{
    bottom:-60px;
    right:30px;
    z-index:1;
}


#contents1 .contents_box, #contents2 .contents_box, #contents3 .contents_box{
    background-image: linear-gradient( 135deg, #2ab1ae 0%, #04716f 100%);
    margin-top: -80px;
}
.contents_box::before,.contents_box::after,.contents_box2::before,.contents_box2::after{display:none;}
.item{
    margin-top: -150px;
    margin-bottom: 100px;
    z-index: 1;
    position: relative;
}
.item img{width:auto;}

#top_cms{
    background-image:url(./Dup/img/bg3.png);
    background-repeat:no-repeat;
    background-position:bottom left;
}
#top_cms .cms_title h2::after{display:none;}
#CMS_TITLE5{
    margin-bottom:0;
    padding-bottom:100px;
}
.cms_title{padding-bottom:20px;}
.cms_title p{display:none;}
#top_cms .cms_title h2::before{display:none;}
#top_cms .cms_title h2::after{
    bottom: -70px;
    background-color: rgba(179,155,139,0.7);
}


/*cms_6-c*/
.ellipsis{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6em;
}
.ellipsis.line3{
  max-height: 16em;
  -webkit-line-clamp: 10;
}








/*----under page-----------------------------------------------------------------*/
#main_img2{max-width:1280px;}
#main_img2 .page_title {background-color: rgba(113,84,4,0.4);}
.page_title h2{
    color:#333;
    font-family: "Utsukushi_min","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.page_title span{display:none;}
#news_list li{width:inhert;}
#cms_5-b .cate_box .open_bt .box_title1::before,
.cms_5-b .cate_box .open_bt .box_title1::before{
    display:none;
}
#cms_5-b .cate_box .open_bt .box_title1, 
.cms_5-b .cate_box .open_bt .box_title1{
    margin-left: 70px;
}
#page7 #contents .cate_box:last-of-type{border-bottom:0;}
#page8 #content{font-size:1rem;}

/* ---------- responsive ---------- */
@media screen and (max-width: 1440px){
.hasu{margin-top:-15%;}
#logo img{width:450px;}
}

@media screen and (max-width: 1080px){
#logo img{width:380px;}
.hasu{margin-top:-18%;}
.catch2{right:14%;}
}

@media screen and (max-width: 915px){
#logo img{width:340px;}
.hasu{margin-top:-22%;}
.catch1{left:14%;}
}

@media screen and (max-width: 900px){
.hasu{margin-top:-25%;}
}

@media screen and (max-width: 810px){
.hasu{margin-top:-32%;}
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#logo{margin-left:0;}
#logo img{width:400px;}
#wrap,#top_cms{background-size:40%;}
.catch1{top: 23%;}
.catch2{
    top: 16%;
    right: 8%;
}
.hasu {
    margin-top: -50%;
}
#main_img::before{
    width: 60vw;
    height: 22vh;
    top: 17%;
    left: 0;
    transform: none; 
    right: 0;
    margin: auto;
}
.item img {
    width: 15%;
}
.item2 img{width:85%;}
.cms_box .border_white{
    border:0;
    background-color:transparent;
    box-shadow:none;
}
#f_menu li a{letter-spacing: 0;}
#main_menu ul li a{
    font-size: 1rem;
    letter-spacing: 0;
}
#f_menu li a[href="page09.aspx"] {
    font-size: 0.9rem;
    letter-spacing: -2px;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#copyright{margin-bottom:70px;}
#main_img::before{top:8%;}
.catch1{
    top: 19%;
    left: 12%;
}
.catch1 img{width: 60%;}
.catch2{
    top: 13%;
    right: -14%;
}
.catch2 img{width: 50%;}
.hasu {
    margin-top: -85%;
}
.hasu img {
    width: 95vw;
}
#logo img{width:300px;}
.item img {
    width: 20%;
}
#oshirase .item2 {
    bottom: -40px;
    right: -10%;
}
.item2 img {
    width: 55%;
}
#contents1 .contents_box, #contents2 .contents_box, #contents3 .contents_box{margin-top:0;}
#main_img2 h2{opacity:0.7;}
#page10 .cate li span{padding-left:0;}
#fakeloader .fl {width: 70%!important;}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 360px){
.hasu {margin-top: -55%;}
.catch1 {top: 25%;}   
.catch2 {
    top: 18%;
    right: -20%;
}
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){
#top_cms .effect,#info_map .effect{padding-top:5px;}
#contact_tel .txt_white,#page8 .contact_mail_txt{padding-top:15px;}

}


