@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

.font1,
h2,h3,h4,
.font_en{
    font-family: 'Kaisei Opti',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.font2,
.con_no,
.cms_title p,
.more a,
.tel_bt a,
.foot_tel_bt a,
#page_title p,
.fat-nav li:last-child a,
#contact_tel a,
#page-top a .font_en{
    font-family: 'Lobster', cursive!important;
}

/*
#fakeloader{
    display:none;
}
*/


.font_14 {
    font-size: 18px;
}

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

body {
    overflow: hidden;
    line-height: 1.7;
}


header{
    background:url(./Dup/img/renga.png) repeat;
    background-size:100px;
}
header .tel_bt a{
    border-top:0!important;
    color:#fff;
    padding-top:10px;
    padding-bottom:10px;
}
#main_menu ul li a {
    color: #fff;
    text-shadow: 0 0 20px #111;
    font-weight: bolder;
}
.tsuika_bnr a{
    transition:all 0.3s;
}
.tsuika_bnr a:hover{
    opacity:0.8;
}

/*--top page---------------------------
-------------------------------------*/
#main_img::before{
    content:'';
    position:absolute;
    display:block;
    pointer-events:none;
}
#main_img::before{
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.2);
    top:0;
    left:0;
    z-index:3;
}

#main_img .catch {
    width: 34vw;
    max-width: 800px;
    right: 5%;
    top: 23%;
    z-index: 4;
}
#main_img .catch img{
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.5));
}
#main_img .item{
    z-index:4;
}

#main_img .item1 {
    width: 130px;
    height: 160px;
    bottom: 21%;
    right: 48%;
}
#main_img .item2 {
    width: 120px;
    height: 130px;
    top: 18%;
    right: 7%;
}
#main_img .item3 {
    width: 120px;
    height: 150px;
    bottom: 4%;
    right: 29%;
}
#main_img .item4 {
    width: 130px;
    height: 160px;
    bottom: 8%;
    right: 1%;
}


.swing{
    animation: swing 1s steps(2, start) infinite;
}


@keyframes swing{
0%{
  transform-origin: bottom;
  transform: rotate(-5deg);
}
100% {
    transform-origin: bottom;
    transform: rotate(5deg);
}
}



.swing2{
    animation: swing2 1s steps(2, start) infinite;
}
@keyframes swing2{
0%{
  transform-origin: bottom;
  transform: rotate(5deg);
}
100% {
    transform-origin: bottom;
    transform: rotate(-5deg);
}
}


#contents1 .intro_sub_title{
    font-size: 2rem;
    font-weight: bold;
}

.portrait_img {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 700px!important;
}

.con_no{
    font-size:1.8rem;
}



/*--under page---------------------------
-------------------------------------*/




/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
header #logo{
    max-width:100px;
}
.hamburger {
    top: 28px;
}
.hamburger__icon, .hamburger__icon:before, .hamburger__icon:after {
    background-color: #fff!important;
    height: 3px;
}
.hamburger.active .hamburger__icon:before,
.hamburger.active .hamburger__icon:after{
    background-color:#f46f36!important;
}
#main_img .catch {
    width: 53vw;
    top: 36%;
}
#main_img .item1 {
    width: 100px;
    height: 130px;
    bottom: 21%;
    right: 44%;
}
#main_img .item2 {
    width: 100px;
    height: 110px;
    top: 18%;
    right: 15%;
}
#main_img .item3 {
    width: 100px;
    height: 130px;
    bottom: 8%;
    right: 25%;
}
#main_img .item4 {
    width: 100px;
    height: 130px;
    bottom: 54%;
    right: 1%;
}
.fat-nav li a{
    font-size: 18px;
}

header .head_banner{
    right:auto;
}
header .head_banner a{
    border-radius:0;
}
.tsuika_bnr{
    left:200px;
    bottom:0;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
header{
    padding-bottom:5px!important;
}
header #logo {
    max-width: 80px;
}
.hamburger {
    top: 16px;
}
#main_img .catch {
    width: 72vw;
    top: 56%;
}
#main_img .item1 {
    width: 60px;
    height: 80px;
    bottom: 6%;
    right: 3%;
}
#main_img .item2 {
    width: 70px;
    height: 80px;
    top: 14%;
    right: 15%;
}
#main_img .item3 {
    width: 60px;
    height: 80px;
    bottom: 55%;
    right: 30%;
}
#main_img .item4 {
    width: 70px;
    height: 100px;
    bottom: 44%;
    right: 1%;
}
#contents1 .intro_sub_title {
    font-size: 1.2rem;
    letter-spacing: -1px;
}
footer .d_flex{
    text-align: center;
}

header .head_banner{
    width:50%;
}
.tsuika_bnr {
    width: 50%;
    left: 50%;
}