@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@300&display=swap');

#wrap{
    overflow: hidden;
}

.bg_color2 {
    background-color: transparent;
    background-image: url(./Dup/img/back_w2.jpg);
}

#main_img img, #intro img, #top_contents1 img, #top_contents2 img {
    transition: ease 0.3s;
    cursor: pointer;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
}

#top_contents1 .contents1_txt h3 {
     transform: none; 
    text-shadow: 0 0 5px rgb(0 0 0 / 20%);
}

#top_contents2 .img2 {
    transform: translateY(50px) translateX(70px);
}

#top_contents2 .img1 {
    transform: translateY(-50px) translateX(-70px);
}

#top_contents2 h3 span {
    padding: 0px;
    font-size: 26px;
    line-height: 1.6em;
    text-align: center;
    color: #22583b;
    padding: 10px;
}

#top_contents2 h3 {
    font-size: 25px;
    padding: 0 50px;
}

h1 img {
    max-width: 250px;
}

#main_nav li a, .sc_nav li a, .sc_nav .shop_link a {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 0.12em;
}

#intro{
    margin-top: 100px;
}

#top_contents1 .contents1_txt h3 {
    transform: scale(1.5) translateX(-6%);
    transform-origin: right;
    /* font-weight: bold; */
    text-align: right;
    line-height: 1.4em;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-family: 'IBM Plex Sans JP', sans-serif;
        font-weight: bold;
    text-shadow: none;
    color: #22583b;
        width: 111% !important;
}

#top_contents1 > div{
    position: relative;
}

#top_contents1 > div:before{
     content: "";
    display: block;
    width: 250px;
    height: 250px;
    position: absolute;
    top: 10%;
    left: 0%;
    background-image: url(./Dup/img/ira.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 2;
}

#footer{
    position: relative;
}

#footer:before{
        content: "";
    display: block;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 3%;
    left: 100%;
    background-image: url(./Dup/img/ira2.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 2;
}

.contents2_txt p{
    width: 100% !important;
}

.cms_2-g .box_wrap {
    box-shadow: none;
    border: 1px solid #d7d7d7;
}

#page_title {
     -webkit-filter: grayscale(0%); 
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
     filter: grayscale(0%); 
}

#page_title h2{
    font-size: 50px;
}

#cms_2-g .cate_txt2{
        margin-bottom: 100px;
}

 .more a span.on {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: translateX(100%);
    animation-name: more;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

 .more a {
    position: relative;
    overflow: hidden;
}

 .more a span{position: relative;z-index: 2;}

 .more a:hover span.on{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	animation-name: more_hover;
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

.txt_color3 {
    color: #5c5c5c;
}


.bg_color3 {
    background-color: #2a2a2a;
}

.linkStyle{
color: #6d8e7c;
font-weight: bold;
}

.youtube{
  position: relative;
	/*max-width: 780px;*/
	width: 70%;
	text-align: center;
	margin: 4% auto 4%;
}
.youtube:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 56.25%;
  }
.youtube iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.box_link{
        max-width: 300px;
    margin: auto;
}

.mail_txt, .contact_wrap{
    display: none;
}


#intro .intro_title {
    padding-top: 0;
        width: 10%;
    margin-left: 2%;
}

.intro_title h3{
        transform: scaleX(0.9) skew(-3deg) rotate(-3deg);
    font-size: 36px;
    /*position: absolute;*/
    /*right: 7%;*/
}

.tel{
    margin-bottom: 0;
}

@media screen and (max-width: 1367px){
    #top_contents2 .contents2_txt {
    width: 70%!important;
}


#top_contents2 .img1 {
    transform: translateY(-50px) translateX(0px);
}

#top_contents2 .img2 {
    transform: translateY(50px) translateX(0px);
}


}

@media screen and (max-width: 1281px){
#top_contents1 figure {
    margin: auto;
}

#top_contents1 .contents1_txt {
    margin: auto;
}

#top_contents1 .contents1_txt h3 {
    transform: none;
    transform-origin: right;
    /* font-weight: bold; */
    text-align: center;
font-size: 25px;
width: 111% !important;
}

}

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

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

#page_title {
    padding: 100px 30px 100px;
}

#main_img figure{
    height: 60vh !important;
}

#main_img figure img{
        width: auto !important;
    height: 100% !important;
}

#top_contents2 h3 span {
    font-size: 23px;
}

#top_contents2 h3 {
    padding: 0 0px;
        margin-bottom: 60px;
}

#page_title h2 {
        filter: drop-shadow(2px 2px 4px white) drop-shadow(2px 2px 4px white);
    line-height: 1.4em;
    font-size: 42px;
}

#page_title p{
    display: inline-block;
    opacity: 1;
    background-color: black;
    color: white;
    padding: 2px 8px;
}

#intro .intro_title {
    width: 90%;
}

#intro h3 {

    margin-bottom: 20px;
}

.intro_title h3 {
    transform-origin: left;
}

#top_contents1 .contents1_txt h3 {
    width: 101% !important;
}

#page10 ul li a {
    background-color: #a9a8a8;
    color: white;
}

#video{
        position: relative;
    height: 60vh;
}


#video video{
    height: 100% !important;
    width: auto !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.shop_link a{
    background-color: black;
    color: white;
}

}