@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500&family=Sacramento&display=swap');
.font1,
.top_cms_title p,
.more a,
#page-top a span,
#page_title p{
    font-family: 'Josefin Sans', sans-serif;
    line-height: 1;
}

:root{
    --color1:#ea7726;
}

/*
#page-top,.fix_bnr{
    position:absolute;
}
*/


/*--all page---------------------------
-------------------------------------*/
.float_right{
    float:right;
}
.float_left{
    float:left;
}
.clearfix::after {
    clear: both;
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
}

.linkStyle{
    color:var(--color1);
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
    text-decoration:underline;
}

body{
    overflow:hidden;
}

/*header*/
header h1{
    width: 40%;
    max-width: 200px;
    transition:all 0.3s;
    margin-left:0!important;
}
header.scr_header h1{
    width: 45%;
    max-width: 120px;
}
header.scr_header{
    background-color: rgba(255,255,255,0.5);
    backdrop-filter:blur(10px);
    z-index:99;
}
header #header #header_menu li a {
    padding-left: 20px;
    padding-right: 20px;
    text-shadow: 0 0 13px #a5c0ed;
}
.scr_header #header #header_menu li a span{
    color:#333!important;
}

header #header #header_menu li a span {
    padding-top: 9px;
    color: #fff!important;
}

.fix_bnr{
    left:20px;
    bottom:20px;
    z-index:10;
}



/*--top page---------------------------
-------------------------------------*/

/*catch*/
.catch{
    top:30%;
    right:5%;
    z-index:2;
}
.passing .passing-bar {
    position: relative;
    display: inline-block;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: #ffe46d;
}
.passing.move .passing-bar:before {
    -webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
    animation: passing-bar 1s ease 0s 1 normal forwards;
}
.passing .passing-txt {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
	padding: 5px 15px;
}
.passing.move .passing-txt {
    -webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
    animation: passing-txt 0s ease .5s 1 normal forwards;
    background-color: #fff;
    color: #2a2922;
    font-size: 2rem;
    font-weight: bold;
}
@-webkit-keyframes passing-bar{
	0% {left: 0;right: auto;width: 0;}
	50% {left: 0;right: auto;width: 100%;}
	51% {left: auto;right: 0;width: 100%;}
	100% {left: auto;right: 0;width: 0;}
}
@keyframes passing-bar{
	0% {left: 0;width: 0;}
	50% {left: 0;width: 100%;}
	51% {left: 0;width: 100%;}
	100% {left: 100%;width: 0;}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}
#contents1 .img_wrap img{
    border-radius:0 30px 0 0 ;
}
.con1_box2 .img_wrap2 figure{
    border-radius:30px 0 0 0 ;
} 
.con1_box1{
    margin-bottom:100px;
}
.con1_sub_title {
    color: #333;
    font-size: 6rem;
    font-weight: 600;  
    letter-spacing: 10px;    
    /*left: -20%;
    top: 8%;
    */
    margin-left:-250px;
    z-index: 2;
}
/*animation*/
.txt_anim6 span{
	display: inline-block;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	-webkit-animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
	animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
	opacity: 0;
}
.txt_anim6 span.start{
	-webkit-animation-name: slide-bs;
	animation-name: slide-bs;
	opacity: 1;
}
@keyframes slide-bs{
	0%{-webkit-transform: translateY(20px);transform: translateY(20px);}
	100%{-webkit-transform: translateY(0);transform: translateY(0);}
}
.bnr1 a,.bnr2 a{
    border-radius:50px;
}
.con1_p{
    padding:50px 100px 0 200px;
}
.owner {
    width: 200px;
    bottom: -16%;
    left: -16%;
    z-index: 2;
}
.img_wrap2 figure{
    height:400px;
}

#contents1_2 figure {
    height:700px;
    border-radius:0 30px 0 0;
}
.con1_2_sub_title {
    color: #333;
    font-size: 5rem;
    font-weight: 600;
    letter-spacing: 10px;    
    top: -8%;
    left: -10%;
    z-index:2;
}
#contents1 .con_box,
#contents1_2 .con_box{
    padding: 50px 100px 0 50px;
}

#contents2 .item1{
    font-size:4rem;
}
.item1::before{
    width:150px;
    height:100px;
    left:-100px;
    background-image:url(./Dup/img/item1.png);
    background-size:contain;
    background-repeat:no-repeat;
    background-color:transparent!important;
}
#contents2 .box::after{
    display:none;
}
#contents2 .box:first-of-type figure{
    border-radius:30px 0 0 0;
}
#contents2 .box:last-of-type figure{
    border-radius:0 0 30px 0;
}
#contents2 .box .font1{
    font-size:1.5rem;
    position:relative;
}
#contents2 .box .font1:before {
    content: '';
    position: absolute;
    display: block;
    width: 70px;
    height: 2px;
    background-color: #333;
    top:-20px;
    left: -50px;
    transform: rotate(-40deg);
}
.item2::before{
    width:150px;
    height:100px;
    left:-100px;
    background-image:url(./Dup/img/item2.png);
    background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent!important;
}

#top_cms .more a{
    color:var(--color1);
    border-color:var(--color1);
    font-size: 1.2rem;
}
#top_cms .more a:hover{
    background-color:var(--color1)!important;
    color:#fff!important;
}
.cms_wrap{
    margin-bottom:100px;
}

/*--under page---------------------------
-------------------------------------*/
#page_title > div{
    padding:30px;
    background-color:rgba(255,255,255,0.8);
}
.page5 #page_title > div{
    background-color:#fff;
}
#page_title .item1:before{
    display:none;
}

#cms_2-c #cate1 .box_description1{
    display:block!important;
}
/*voices*/
.v_type3 .cate_box{border: 1px solid #c9baa9;}
/*.v_type3 .box_title1{color: #a67c52;}*/


#page09 .item1::before{
    display:none;
}


#logo{
    width:10%!important;
}
header h1{
    width:100%;
}
#header_menu{
    width:90%!important;
}

/*---------responshive--------------*/
@media screen and (max-width: 1100px){
header.scr_header h1 {
    width: 60%;
}
.con1_2_sub_title{
    left:-20%;
}
}
@media screen and (max-width: 885px){
header #header #header_menu li a{
    padding-left: 10px;
    padding-right: 10px;
}
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

.tb_logo{
    top:10px;
    left:10px;
    z-index:99;
}
.catch{
    right:3%;
}
.passing.move .passing-txt{
    font-size:1.2rem;
}
#contents1 .img_wrap img {
    border-radius: 0;
}
#contents1 .con_box{
    padding:50px 50px 0 50px;
}
.con1_sub_title{
    font-size:4rem;
    /*left:0;
    top:-510px;
    */
    margin-left:-20px;
}
.con1_box1 {
    margin-bottom: 0px;
}
.con1_p {
    padding: 50px 50px 180px;
}
.con1_box2 .img_wrap2 figure{
    display:none;
}
.owner {
    width: 180px;
    bottom: auto;
    left: auto;
    top: -170px;
    right: -170px;
}
#contents1_2 .con_box {
    padding: 80px 50px 0;
}
#contents1_2 figure{
    height:450px;
    border-radius:0;
}
.img_wrap2{
    margin-left:60px;
    margin-right:auto;
}
.con1_2_sub_title {
    font-size: 4rem;
    top: -20px;
    left: 0;
}
#contents2 .box:first-of-type figure,
#contents2 .box:last-of-type figure{
    border-radius:0;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.tb_logo{
    width:70px;
    top:5px;
    left:5px;
}
.catch{
    right:0;
    top:auto;
    bottom:0;
}
.passing.move .passing-txt{
    font-size:1rem;
}
#contents1 .con_box, #contents1_2 .con_box {
    padding: 30px 0;
}
.con1_sub_title {
    font-size: 2.3rem;
    /*left: 0;
    top: -250px;
    */
    letter-spacing: 1px;
    margin-left:0;
}
.bnr1 a,.bnr2 a{
    margin:auto;
}
.con1_p {
    padding: 50px 0;
}
.owner {
    width: 150px;
    bottom: auto;
    left: auto;
    top: -40px;
    right: -10px;
}
#contents1_2{
    padding-top:120px;
}
#contents1_2 figure {
    height: 250px;
}
.con1_2_sub_title {
    font-size: 3rem;
    letter-spacing:5px;
}
#contents2 .item1 {
    font-size: 2rem;
}
.item1::before {
    width: 100px;
    height: 100px;
    left: -60px;
}
#contents2 .box > div{
    width:100%;
}
#contents2 .box .font1:before{
    top: -30px;
    left: -30px;
}
.item2::before {
    width: 100px;
    left: -70px;
}
.fix_bnr{
    left:10px;
    bottom:10px;
}
#loader div img {
    width: 150px;
}
#footer_cms > div {
    padding:20px!important;
}
}