﻿@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400&display=swap');
@font-face {
font-family: "hui";
  src: url("./Dup/img/hui.ttf") format("ttf"),url("./Dup/img/hui.woff") format("woff"),url("./Dup/img/hui.woff2") format("woff2");}
  
:root{
    --font-hui:'hui','Kiwi Maru','Zen Maru Gothic','Zen Kaku Gothic Antique', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif !important;
    --font-jp:'Kiwi Maru','Zen Maru Gothic','Zen Kaku Gothic Antique', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif !important;    
}


body,.intro_box .font_un,.font_un,.font_san,h4,h5,h6.intro_box .font_un,.font_un,.intro_box .font_un,#cms_5-c .box_title1,#wrap{font-family:  var(--font-jp)  !important;}
h2,h3,section#contents2 h4 {font-family:  var(--font-hui) !important;}
    


/* color ---------------------------------------------------------------------------------------------*/
:root{
    --color1:#9cc5c4;
    --color2:#f6f2ed;
    --color3:#98846a;
    --color4:#7b542d;
    --color5:#2e7e72;  
    --color6:#67a3a2;
    --white:#FFFFFF;
    --black:#4f3423;
    --gray:#c0b4a5;
}

body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: var(--black);}
.txt_white,.hvr_txt_white:hover{color: var(--white);}
.txt_color1,.hvr_txt_color1:hover{color: var(--color6);} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: var(--color2);} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: var(--color3);} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: var(--color4);} /* アクセントカラー2 */
/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: var(--white)} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: var(--black);} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: var(--color1);} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: var(--color2);} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: var(--color3);} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: var(--color4);} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}
/* border-color ※!important */
.border_white,.hvr_border_white:hover{border-color: var(--white);}
.hvr_border_black:hover{border-color: var(--black);}
.border_black{border-color: var(--gray);}
.border_color1,.hvr_border_color1:hover{border-color: var(--color1);}
.border_color2,.hvr_border_color2:hover{border-color: var(--color2);}
.border_color3,.hvr_border_color3:hover{border-color: var(--color3);}
.border_color4,.hvr_border_color4:hover{border-color: var(--color4);}

.linkStyle{color: var(--color3);
          border-bottom:solid 1px;}
/* color ---------------------------------------------------------------------------------------------*/

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*footer/map*/
#info #map iframe {height: 40vh;}
#map iframe {width: 100%;}
#info #map {width: 50%;}
#info .info_txt {width: 40%;}
.info_box.pd_b-20px {padding-top: 80px;}

iframe#gmap {
    filter: sepia(15%);
    -webkit-filter: sepia(15%);}
/*footer/map*/

div#page-top {
    background: transparent;
    height: 56px;}
div#page-top:hover{background:rgba(152, 132, 106,0.4);}


div#main_menu a {color: var(--color2);}
div#main_menu a:hover,div#main_menu a.txt_color1 {color: var(--color1) !important;}

.sns_links {display: flex;}
.sns_links li {
    margin: 0 10px;
    width: 9%;}
    
    
#main_menu .sns_links {
    display: flex;
    margin: 5% 0px 0px 26%;}

#main_menu .sns_links li {
    margin: 0 10px;
    width: 6%;}

main {border-left: solid 55px #4f3423;
      border-right: solid 55px #4f3423}


div#menu_wrap {z-index: 11 !important;}


#fix_bnr {
    bottom: 20px;
    right: 75px;
    z-index: 10;
    width: 200px;
}
#copyright{
	padding-bottom: 100px;
}
@media screen and (max-width: 768px){
#fix_bnr {
    bottom: 15px;
    right: 65px;
    z-index: 10;
    width: 150px;
}
}

@media screen and (max-width: 667px){
#fix_bnr {bottom: 7px;right: 72px;width: 65%;}
#copyright{padding-bottom: 55px;}
}
/* #loader---------------------------------------------------------------------------------------------*/
#loader{
    width: 100%;
    height: 100vh;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    transition: ease 4s;
    background-image:url(dup/img/load_bg.jpg);
    background-color:var(--color1);
    background-size:cover;
    background-position:center;
    animation-name: loader1;
	animation-duration: 8s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

#loader div img{max-width:300px !important;}

@keyframes loader1{
    0% {transform: scale(1);opacity: 1;
    }
	30% {opacity: 1;}
	40% {transform: scale(1);opacity: 0;
	}
	80% {transform: scale(1);opacity: 0;}
	100% {transform: scale(1);opacity: 0;}	
}
/* #loader---------------------------------------------------------------------------------------------*/
/*posi_rel*/
section#contents1,.box_item03,.box_item02,main,section#contents2,.con2 {position: relative;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

ul.top_menu {
    z-index: 12;
    position: absolute;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    right: 7vw;
    line-height: 2;
    top: 9vh;
    background: rgb(79 52 35 / 30%);
    padding: 10px;
}
ul.top_menu li {
    border-left: dotted 1px var(--color2);
}

ul.top_menu a:hover{opacity:0.7;}

/*div#menu_wrap {*/
/*    z-index: 0;*/
/*}*/

#wrap{position:relative;}

.top_main::before {
    content: '';
    position: absolute;
    width: 100vw;
    height: 107vh;
    background-image: url(dup/img/item01.png);
    z-index: 12;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% 109vh;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -2%);
}
.top_main header h1 {display: none;}
header .sns_links {
    padding: 5px;
    display: none;}
.sc_icon{display: none}

img.item02 {
    width: 20vw;
    position: absolute;
    top: -1px;}




.item1::before, .item2::before, .item3::before{content:none;}

.box.item2 figure {
    border: solid 20px #4f3423;
    z-index:-1;
}

.box.item2 figure img, .box.item2 figure {
    width: 55vh!important;
    height: 40vh !important;
    object-fit: cover;}
    


.box.item3 figure {border: solid 20px #4f3423;
                  background:var(--black);
}
.box.item3 figure img, .box.item3 figure {
    width: 55vh!important;
    height: 40vh !important;
    object-fit: cover;}


span.posi_abs.border01 {
    border: solid 20px #4f3423;
    width: 40vw!important;
    height: 40vh !important;
    object-fit: cover;
    right: -42vw;
    top: calc(6% - 0.5px);
    background: rgb(255,248,241);
    background: radial-gradient(circle, rgba(255,248,241,0.04667804621848737) 0%, rgb(227 214 200 / 63%) 50%, rgb(208 180 149 / 62%) 100%);
    z-index: -2;
}

span.posi_abs.border02 {
    border: solid 20px #4f3423;
    width: 40vw!important;
    height: 40vh !important;
    object-fit: cover;
    left: -39.5vw;
    top: calc(6% - 0.5px);
    background: rgb(255,248,241);
    background: radial-gradient(circle, rgba(255,248,241,0.04667804621848737) 0%, rgb(227 214 200 / 63%) 50%, rgb(208 180 149 / 62%) 100%);
    z-index: -4;
}

#wrap {padding-right: 0px;}

/*menu----------------------------------------------------*/
#menu_wrap,#menu_bt {background:transparent;}
#menu_wrap.active {background: rgb(79 52 35 / 70%);}
/*menu----------------------------------------------------*/

body#body {
    background: url(dup/img/bg_img.jpg);
    background-size: 100%;}
    
.box.box1 p {padding-left: 15px;}
.box.box1 {padding: 5% 5% 5% 0% !important;}
.box.box1 .item1 {
    margin-bottom: 20px;
    font-size: 29px;
    color: var(--color5);}
    
span.posi_rel.maruta {
    width: 100%;
    height: 20vh;
}
.maruta img {
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 95vw;
    transform: translate(-50%, -28%);
}


section#contents2::before {
    content: '';
    border: solid 55px var(--color1);
    position: absolute;
    width: 100%;
    height: 100%;
    left: -55px;
    top: 0;
    background: url(dup/img/bg_img02.jpg);
    background-size: 30%;
}

.box2 {padding: 5% 0% 5% 10% !important;}
section#contents2 .box_img figure {border: solid 20px var(--color1);}
#contents2 .box_txt {
    background: rgb(235 225 213 / 40%);
    border: solid 0;}
    
section#contents1::before {
    content: '';
    position: absolute;
    top: -100px;
    right: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(dup/img/item06.png);
    width: 14vw;
    height: 41vh;
    z-index: 0;
}
    
.con2::before {
    content: '';
    position: absolute;
    top: -14%;
    left: -18%;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(dup/img/item06.png);
    width: 14vw;
    height: 41vh;
    z-index: -2;
}

.box.item3 {z-index: -3;}

section#contents1 h3 {color: var(--color5);}
.con2.d_flex {padding-top: 70px;}
.con2 h3 {font-size: 28px;}



.item08 {
    width: 14vw;
    left: 0;
    bottom: -55px;}

.item09 {
    width: 14vw;
    right: 10px;
    top: 40%;
    transform: rotate(7deg);}
    
#contents2 h3.item1 {
    font-size: 36px;
    color: var(--color2);
    top: -11px;}
    
section#contents2 h4 {
    color: var(--color5);
    font-size: 20px;}
    
.top_cms_box .cms_wrap.bg_color2 {
    background-image: url(dup/img/bg_img03.png);
    background-size: 1500px;
    background-color: var(--color2);}
    
div#info {
    background: url(dup/img/bg_img04.png);
    background-size: 750px;
    background-position: top -13% center;
}

.info_top{ margin-top: 100px;}
    
footer {background: url(dup/img/bg_img05.jpg);}

footer .bg_color2 {
    background: url(dup/img/bg_img05.jpg);
    background-size: 40%;}


section#main_img::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(dup/img/item10.png);
    background-size: 40vw;
    z-index: 12;
    background-repeat: no-repeat;
    background-position: bottom 7% left -1%;
}
section#page_title {background: url(dup/img/bg_img04.png);
                    background-size:750px;
}
div#header h1 {padding: 10px 10px 10px 30px;}
span.sub_title {line-height: 1.5;}
/*撮影プラン--------------------------------------------------------------------------------------------------------*/
.link_type1 .link_top .link_title {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
	margin-bottom: 30px;
    color: #474521;
    font-weight: normal;
}
.link_type1 .link_top .link_title{
    font-size: 20px;
    margin-bottom: 20px;
}
.link_type1 .link_top a{
	padding-top: 80px;
    padding-bottom: 60px;
}
.link_type1 .link_top a:hover{
    background-color: #ededeb;
}
.link_type1 .link_top a:hover .link_img1{
    transform: translate(-50%, -50%) scale(1.1,1.1);
    opacity: 0.1;
}
@media screen and (max-width: 667px){
.link_type1 .link_top .link_title{
    font-size: 15px;
}
}
/*撮影プラン--------------------------------------------------------------------------------------------------------*/
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


header h1 {
    position: absolute;
    width: 20%;
    max-width: 180px;
    top: 20px;
    left: 60px;
    z-index: 2;
    background: transparent !important;
}

/*ギャラリー----------------------------------------------------------------------------------------------------------*/
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.g_type6 .cate_box{width: 49%!important;}
}
/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
.g_type6 .box_wrap{	width: 100%!important;margin-left: 8px;}
.g_type6 .cate_box{width: 48%!important;}
}
/*ギャラリー----------------------------------------------------------------------------------------------------------*/
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*タブレット*/
@media screen and (max-width: 768px){
.top_main::before {
    height: 55vh;
    background-image: url(dup/img/item01.png);
    background-size: 100% 55vh;}    
section#main_img::before {
    background-size: 52vw;
    background-position: bottom 1% left -1%;}
#loader div img {max-width: 200px !important;}
main {
    border-left: solid 40px #4f3423;
    border-right: solid 40px #4f3423;}
img.item02 {
    width: 45vw;
    position: absolute;
    top: -53px;}
#contents1 .box_wrap .box {
    width: 50%;
    float: none;
    box-sizing: border-box;
    padding: 5% 0% 5% 0%;}
#contents1 .box_wrap .box1,#contents1 .box_wrap .box2 {
    width: 100%;
    float: none;
    box-sizing: border-box;
    padding: 14% 5% 5% !important;}
#contents1 .box_wrap .box2{
    padding: 5% 5% 5% !important;    
}    
    
.box.box1 p {padding-left: 0;}
section#contents1::before {
    top: -100px;
    width: 15vw;
    height: 20vh;}
.con2::before {
    top: -9%;
    left: 0%;
    width: 18vw;
    height: 29vh;
    z-index: -2;}
.item09 {
    width: 17vw;
    right: -12px;
    top: 29%;
    transform: rotate(2deg);
    z-index: 5;
}
#contents2 .box > div {
    width: 90%;
    box-sizing: border-box;
    margin: 0 auto 5% !important;}
.item08 {
    width: 14vw;
    left: 0;
    bottom: -40px;
    z-index: 2;}
div#top_cms {padding-top: 200px;}
.top_cms_box .cms_wrap.bg_color2 {
    background-image: url(dup/img/bg_img03.png);
    background-size: 800px;
    background-color: var(--color2);
    width: 70%;
    margin: 0 auto;}
#menu_wrap, #menu_bt {background: var(--color4);}
#menu_bt {left: -80px !important;}
div#page-top {
    background: var(--color4);
    height: 55px;}

section#contents2::before {
    content: '';
    border: solid 40px var(--color1);
    position: absolute;
    width: 100%;
    height: 100%;
    left: -40px;
    top: 0;
    background: url(dup/img/bg_img02.jpg);
    background-size: 30%;
}

#menu_wrap.active #menu_bt {
    left: 20px !important;
}

#main_menu .sns_links {
    display: flex;
    margin: 0% 0px 0px 18%;
    width: 65% !important;}
#main_menu .sns_links li {
    margin: 0 10px;
    width: 10%;}
#contents2 h3.item1 {
    font-size: 33px;
    color: var(--color2);
    top: -17px;}
div#header h1 {
    padding: 29px 10px 10px 9px;
    width: 17%;}
footer .bg_color2 {background-size: 65%;}
div#menu_wrap {z-index: 12 !important;}
}


/*スマホ*/
@media screen and (max-width: 667px){
    #main_img img {
        height: 50vh !important;
        width: auto !important;}
    .top_main::before {
        height: 44vh;
        background-image: url(dup/img/item01.png);
        background-size: 100% 44vh;}
    section#main_img::before {
        background-size: contain;
        width: 71vw;
        height: 27vh;
        bottom: -1vw;
        left: -1vw;}
    #menu_bt {left: -60px !important;}        
    main {
        border-left: solid 20px #4f3423;
        border-right: solid 20px #4f3423;}
    section#contents2::before {
        content: '';
        border: solid 20px var(--color1);
        border-top: solid 45px var(--color1);
        left: -20px;
        background-size: 95%;}
    #contents1 .box_wrap .box1, #contents1 .box_wrap .box2 {
        width: calc(100% - 40px);
        float: none;
        box-sizing: border-box;
        padding: 5% 5% 5% !important;}
    .box.item2 figure img, .box.item2 figure {
        width: 40vh!important;
        height: 30vh !important;
        object-fit: cover;
        border: solid 15px var(--black);}
    span.posi_abs.border01 {
        border: solid 15px var(--black);
        width: 40vw!important;
        height: 30vh !important;
        object-fit: cover;
        right: -42vw;
        top: calc(6% - 1px);
        background: rgb(255,248,241);
        background: radial-gradient(circle, rgba(255,248,241,0.04667804621848737) 0%, rgb(227 214 200 / 63%) 50%, rgb(208 180 149 / 62%) 100%);
        z-index: -2;}
        
    .box.item3 figure img, .box.item3 figure {
        width: 40vh!important;
        height: 30vh !important;
        object-fit: cover;
        border: solid 15px var(--black);}
    span.posi_abs.border02 {
        border: solid 15px var(--black);
        width: 40vw!important;
        height: 30vh !important;
        object-fit: cover;
        right: -42vw;
        top: calc(6% - 1px);
        background: rgb(255,248,241);
        background: radial-gradient(circle, rgba(255,248,241,0.04667804621848737) 0%, rgb(227 214 200 / 63%) 50%, rgb(208 180 149 / 62%) 100%);
        z-index: -2;}
    span.posi_abs.border02 {z-index: -5;}        
        
    img.item02 {
        width: 64vw;
        position: absolute;
        top: -53px;}
    .box.box1 .item1 {
        margin-top: 15px;
        margin-bottom: 20px;
        font-size: 20px;
        color: var(--color5);
        line-height: 1.8;}
    #menu_wrap.active #menu_bt {left: 10px !important;}
    .maruta img {
        z-index: -1;
        top: 50%;
        left: 50%;
        width: 170vw;
        transform: translate(-50%, -28%);}
    .con2::before {
        top: -7%;
        left: 8%;
        width: 20vw;
        height: 18vh;
        z-index: -2;}
    .con2 h3 {
        font-size: 18px;
        margin-top: 10px;}
    #contents2 h3.item1 {
        font-size: 30px;
        color: var(--color2);
        top: -11px;}
    section#contents2 .box_img figure {border: solid 15px var(--color1);}
    section#contents2 h4 {
        color: var(--color5);
        font-size: 18px;}
    .item09 {
        width: 22vw;
        right: -16px;
        bottom: 46%;
        top: auto;
        transform: rotate(2deg);
        z-index: 5;}
    .item08 {
        width: 23vw;
        left: -17px;
        bottom: -45px;
        z-index: 2;}
    div#top_cms {padding-top: 130px;}
    .top_cms_box .cms_wrap.bg_color2 {
        background-image: url(dup/img/bg_img03.png);
        background-size: 400px;
        background-color: var(--color2);
        width: calc(100% - 50px);
        margin: 0 auto;}
    #info .info_txt {
        width: auto;
        margin: 0 auto 10%;}
    div#info {
        background: url(dup/img/bg_img04.png);
        background-size: 600px;
        background-position: top -23% center;}
    footer .bg_color2 {
        background: url(dup/img/bg_img05.jpg);
        background-size: 100%;}
    .sns_links li {
        margin: 0 10px;
        width: 7%;}
    #main_menu .sns_links {
        display: flex;
        margin: -6% 0px 0px 10%;
        width: 80% !important;}
    #loader div img {max-width: 150px !important;}
    #fix_bnr {
        bottom: 3px;
        right: 60px;
        width: 25%;}
    header h1 {
        position: absolute;
        width: 19% !important;
        max-width: 180px;
        top: 10px;
        left: 29px;
        z-index: 2;
        padding: 5px !important;
        background: transparent !important;}
    #page_title {padding: 100px 0px 40px;}        
}





/*20220907*/


ul.top_menu {
    z-index: 12;
    position: absolute;
    -ms-writing-mode: inherit !important;
    writing-mode: inherit;
    transform: translate(-50%, 0%);
    right: auto;
    left: 50%;
    line-height: inherit;
    display: flex;
    letter-spacing: inherit;
    top: 0%;
    background: transparent;
    padding: 2px;
    width: 100%;
    justify-content: center;
}

ul.top_menu li {border-left: dotted 0px var(--color2);}

ul.top_menu li a {
    margin: 0 20px;
    padding-bottom: 6px;
    font-family: var(--font-hui);
    border-bottom: dotted 2px;
}

section#main_img::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(dup/img/item10.png),url(dup/img/add_catch.png);
    background-size: 27vw,60vw;
    z-index: 12;
    background-repeat: no-repeat;
    background-position: bottom 74% left -2%,bottom 4% center;
}

/*タブレット*/
@media screen and (max-width: 768px){
ul.top_menu{display:none;}
section#main_img::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(dup/img/item10.png),url(dup/img/add_catch.png);
    background-size: 33vw,65vw;
    z-index: 12;
    background-repeat: no-repeat;
    background-position: bottom 62% left -1%,bottom 5% center;}    
    
}

/*スマホ*/
@media screen and (max-width: 667px){
section#main_img::before {
    background-size: contain !important;
    width: 71vw;
    height: 27vh;
    bottom: -1vw;
    left: -1vw;
    background-image: url(dup/img/add_catch02.png);
    background-position: bottom 11% left -1%;
}
}



/*20220914*/

img.logo02 {
    max-width: 300px;
    margin-left: -150px;
    padding-right: 8%;
    box-sizing: border-box;
    transform: translateY(25%);}

section#main_img::before {
    content: '';
    position: absolute;
    width: 58vw;
    height: 19vh;
    background: url(dup/img/catch.png);
    background-size: contain;
    z-index: 12;
    background-repeat: no-repeat;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0%);
}

section#main_img::after {
    content: '';
    position: absolute;
    width: 14vw;
    height: 55vh;
    background: url(dup/img/catch02.png);
    background-size: contain;
    z-index: 12;
    background-repeat: no-repeat;
    top: 0;
    right: 0%;
    transform: translate(19%,13%) rotate(6deg);
}

/*1600*/
@media screen and (max-width: 1600px){
section#main_img::after {
    content: '';
    position: absolute;
    width: 12vw;
    height: 40vh;
    background: url(dup/img/catch02.png);
    background-size: contain;
    z-index: 12;
    background-repeat: no-repeat;
    top: 0;
    right: 0%;
    transform: translate(12%,24%) rotate(6deg);
}
}


@media screen and (max-width: 1280px){
section#main_img::after {
    content: '';
    position: absolute;
    width: 10vw;
    height: 34vh;
    background: url(dup/img/catch02.png);
    background-size: contain;
    z-index: 12;
    background-repeat: no-repeat;
    top: 0;
    right: 0%;
    transform: translate(4%,93%) rotate(2deg);
}
}


/*タブレット*/
@media screen and (max-width: 1000px){
section#main_img::before {
    content: '';
    position: absolute;
    width: 65vw;
    height: 7vh;
    background: url(dup/img/catch.png);
    background-size: contain;
    z-index: 12;
    background-repeat: no-repeat;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,-12%);
}


section#main_img::after {
    content: '';
    position: absolute;
    width: 21vw;
    height: 24vh;
    background: url(dup/img/catch02.png);
    background-size: contain;
    z-index: 12;
    background-repeat: no-repeat;
    top: 0;
    right: auto;
    left: -1%;
    transform: translate(1%,33%) rotate(357deg);
}
}


/*スマホ*/
@media screen and (max-width: 667px){
section#main_img::before {display: none;}
section#main_img::after {
    content: '';
    position: absolute;
    width: 21vw;
    height: 27vh;
    background: url(dup/img/catch02.png);
    background-size: contain;
    z-index: 12;
    background-repeat: no-repeat;
    top: 0;
    right: auto;
    left: -1%;
    transform: translate(-1%,47%) rotate(358deg);
}

}


/*0915*/

section#contents1::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(dup/img/add_item02.png);
    width: 21vw;
    height: 34vh;
    z-index: 0;
}

.con2::before {
    content: '';
    position: absolute;
    top: -14%;
    left: -21%;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(dup/img/add_item01.png);
    width: 16vw;
    height: 60vh;
    z-index: -2;
}

.item08 {
    width: 12vw;
    left: 16px;
    bottom: -55px;
}

.top_cms_box,div#info{position:relative;}
.top_cms_box:nth-of-type(2)::before {
    content: '';
    position: absolute;
    width: 8vw;
    height: 18vh;
    background: url(dup/img/add_item04.png);
    background-size: contain;
    z-index: 5;
    bottom: -5vw;
    right: -9vw;
    background-repeat: no-repeat;
    transform: rotate(2deg);
}

.top_cms_box:nth-of-type(6)::before {
    content: '';
    position: absolute;
    width: 8vw;
    height: 18vh;
    background: url(dup/img/add_item05.png);
    background-size: contain;
    z-index: 5;
    bottom: -5vw;
    left: -9vw;
    background-repeat: no-repeat;
    transform: rotate(2deg);
}

.top_cms_box:nth-of-type(6)::before {
    content: '';
    position: absolute;
    width: 8vw;
    height: 28vh;
    background: url(dup/img/add_item05.png);
    background-size: contain;
    z-index: 5;
    bottom: -9vw;
    left: -11vw;
    background-repeat: no-repeat;
    transform: rotate(344deg);
}

div#info::before {
    content: '';
    position: absolute;
    width: 6vw;
    height: 41vh;
    background: url(dup/img/add_item07.png);
    background-size: contain;
    z-index: 5;
    top: -19vw;
    right: 2vw;
    background-repeat: no-repeat;
}

section#page_title .d_inline_b.txt_right::before {
    content: '';
    position: absolute;
    width: 4vw;
    height: 10vh;
    background: url(dup/img/add_item06.png);
    background-size: contain;
    z-index: 5;
    bottom: -1vw;
    right: -5vw;
    background-repeat: no-repeat;
    transform: scale(-1,1);
    opacity: 0.88;
}

section#page_title .d_inline_b.txt_right {
    position: relative;
}




img.logo02 {
    max-width: 250px;
    margin-left: auto;
    padding-right: 8%;
    box-sizing: border-box;
}

/*1600px*/
@media screen and (max-width: 1600px){
.con2::before {
    top: -14%;
    left: -13%;
    background-image: url(dup/img/add_item01.png);
    width: 20vw;
    height: 55vh;}
 
.item08 {width: 11vw;} 

.top_cms_box:nth-of-type(2)::before {
    width: 9vw;
    height: 12vh;
    background-image: url(dup/img/add_item04.png);
    bottom: -5vw;
    right: -3vw;}
.top_cms_box:nth-of-type(6)::before {
    width: 10vw;
    height: 23vh;
    background-image: url(dup/img/add_item05.png);
    bottom: -7vw;
    left: -4vw;}
div#info::before {
    width: 6vw;
    height: 37vh;
    background-image: url(dup/img/add_item07.png);
    top: -19vw;
    right: 0vw;}

}

/*1480px*/
@media screen and (max-width: 1480px){
.con2::before {
    top: -14%;
    left: -1%;
    width: 17vw;
    height: 41vh;}
.item09 {
    width: 10vw;
    right: 10px;
    top: 47%;
    transform: rotate(7deg);}
.item08 {
    width: 10vw;
    left: -8px;
    bottom: -55px;}
.top_cms_box:nth-of-type(2)::before {right: 0vw;}
.top_cms_box:nth-of-type(6)::before {left: 0vw;}
div#info::before {
    width: 6vw;
    height: 34vh;
    top: -20vw;
    right: 0vw;}
    
img.logo02 {
    max-width: 230px;
    margin-left: -99px;
    padding-right: 2%;
    box-sizing: border-box;
    transform: translateY(25%);
}
}
/*1280px*/
@media screen and (max-width: 1280px){
img.logo02 {
    max-width: 190px;
    margin-left: -75px;
    padding-right: 2%;}
}
/*1180px*/
@media screen and (max-width: 1180px){
img.logo02 {
    max-width: 200px;
    margin-left: 0;
    padding-right: 0px;
    box-sizing: border-box;
    transform: translateY(-33%);
    display: block;
    text-align: center;
    margin: 0 auto;
}
}

/*768px*/
@media screen and (max-width: 768px){
section#contents1::before {
    top: -111px;
    right: -58px;
    width: 34vw;
    height: 18vh;}
    
.con2::before {
    top: -10%;
    left: -1%;
    width: 19vw;
    height: 26vh;}

.item08 {
    width: 13vw;
    left: -13px;
    bottom: -55px;}
.top_cms_box:nth-of-type(2)::before {
    width: 15vw;
    height: 7vh;
    bottom: -5vw;
    right: 1vw;}
.top_cms_box:nth-of-type(6)::before {
    width: 14vw;
    height: 15vh;}
div#info::before {
    width: 9vw;
    height: 25vh;
    top: -33vw;
    right: 0vw;}

section#page_title .d_inline_b.txt_right::before {
    width: 7vw;
    height: 6vh;
    background-image: url(dup/img/add_item06.png);
    bottom: -1vw;
    right: -10vw;}


}

/*667px*/
@media screen and (max-width: 667px){
section#contents1::before {
    top: -59px;
    right: -18px;
    width: 27vw;
    height: 14vh;}
.con2::before {
    top: -8%;
    left: -1%;
    width: 30vw;
    height: 28vh;}
.item09 {
    width: 22vw;
    right: 16px;
    top: auto;
    bottom: 46%;
    transform: rotate(2deg);}
.item08 {
    width: 20vw;
    left: -10px;
    bottom: -55px;}
    
.top_cms_box:nth-of-type(2)::before {
    width: 23vw;
    height: 11vh;
    bottom: -14vw;
    right: -2vw;}
.top_cms_box:nth-of-type(6)::before {
    width: 17vw;
    height: 15vh;}
    
div#info::before {
    width: 16vw;
    height: 25vh;
    top: -44vw;
    right: -3vw;}
    
section#page_title .d_inline_b.txt_right::before {
    width: 10vw;
    height: 8vh;
    background-image: url(dup/img/add_item06.png);
    bottom: -1vw;
    right: -14vw;
}
section#page_title .d_inline_b.txt_right {
    position: relative;
    margin-left: -6vw;
}
img.logo02 {
    max-width: 150px;
    margin-left: 0;
    padding-right: 0px;
    padding-left: 10px;
    box-sizing: border-box;
    transform: translateY(-33%);
    display: block;
    text-align: center;
    margin: 5px auto;
}
}


/*20221005----------------------*/
.logo02_n img {
    max-width: 300px;
    margin-left: calc(100% - 380px);}

.title04 h2 {display: inline-block;
            position: relative;}
.title04 span {
    font-size: 16px;
    display: block;
    text-align: right;
    line-height: 1;}
    
img.add_item06 {
    width: 55px;
    padding-left: 12px;
    transform: scale(-1,1);    
}

@media screen and (max-width: 1280px){
.logo02_n img {
    max-width: 230px;
    margin-left: calc(100% - 280px);
}
}

@media screen and (max-width: 1100px){
.logo02_n img {
    max-width: 170px;
    margin-left: calc(100% - 210px);}
}


@media screen and (max-width: 768px){
.logo02_n img {
    max-width: 200px;
    margin-left: auto;}
.title04 {
    text-align: center;
    padding-top: 20px;}
.title04 span {font-size: 14px;}
}


@media screen and (max-width: 667px){
.logo02_n img {max-width: 180px;}
.title04 span {font-size: 12px;}
img.add_item06 {width: 43px;}
}