@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');

@font-face {
font-family: "rogo";
  src: url("Dup/css/rogo.ttf") format("ttf"),url("Dup/css/rogo.woff") format("woff"),url("Dup/css/rogo.woff2") format("woff2");
}

h2, h3, .cms_title h3{
    font-family: "rogo";
}

.blur {
    background: rgba(255,255,255,0.85) !important;
}

.blur .txt_white{
    color: black;
}

#contents .con_title {
        font-size: 38px;
    margin-bottom: 40px;
    font-family: 'rogo';
}

.more .more_item:before {
    background-color: #3f4f89;
        background-color: #607ea3;
}

.bg_color3, .hvr_bg_color3:hover {
    background-color: #607ea3;
}

.bg_color1, .hvr_bg_color1:hover {
    background-color: #efcf8f;
}

#footer_info{
        background-image: url(./Dup/img/wood.jpg);
    background-size: 50%;
}

#loading {
    background-color: #f3f3f3;
}

#loading:before {
	position: absolute;
    content: "";
    left: 0;
    top: 35%;
    width: 100%;
    height: 80px;
    background-image: url(./Dup/img/left.png);
    background-size: 150px auto;
    background-position-y: 0;
    background-position-x: 0;
    background-repeat: repeat-x;
    animation: loop 30s linear infinite;
    opacity: 0.2;
}

#loading:after {
	position: absolute;
    content: "";
    left: 0;
    top: 58%;
    width: 100%;
    height: 80px;
    background-image: url(./Dup/img/right.png);
    background-size: 150px auto;
    background-position-y: 0;
    background-position-x: 0;
    background-repeat: repeat-x;
    animation: loop 30s linear infinite ;
    animation-direction: reverse;
    opacity: 0.2;
}

@keyframes loop {
	0% {background-position-x: 0;}
	100% {background-position-x: -1500px;}
}

#copyright{
        background-color: #607ea3;
}

.liana {
    font-family: liana,script;
    font-family: 'Caveat Brush', cursive;
}

#main_img:before {
    background-color: rgba(255,255,255,0.0);
}

.top_title .rotate_txt span, #intro .rotate_txt span {
    color: #4d6582;
}

header.scr_header {
    background-color: rgba(200,200,200,0.75) !important;
}

#main_img:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/catch.png), url(./Dup/img/nami.png), url(./Dup/img/nami2.png);
    background-position: left bottom, top right, left bottom;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 27%, 25%, 27%;
    pointer-events: none;
}

#pc_nav ul li{
        background-color: #0c0c0c;
}

#contents_wrap .con_box_item, .intro_right{
    position: relative;
}

.intro_right:before{
    content: "";
    display: block;
    width: 100%;
    height: 400px;
    position: absolute;
    top: -10%;
    left: 80%;
    background-image: url(./Dup/img/fish.png);
    background-position: top right;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: -1;
    opacity: 0.2;
}

#contents_wrap .con_box_item:before{
        content: "";
    display: block;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: -8%;
    background-image: url(./Dup/img/fish.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: -1;
    opacity: 0.2;
}

#contents_wrap .box2 .con_box_item:before{
    left: 108%;
}

.menu-trigger-bar {
    background-color: black;
    filter: drop-shadow(2px 2px 1px white);
}

#intro_wrap > h2{
    font-size: 40px;
    font-family: "rogo";
        margin-bottom: 100px;
}

#intro_wrap > img{
        max-width: 30px;
    display: block;
    margin: auto;
}

#video {
    position: relative;
    background-image: url(./Dup/img/wood.jpg);
    max-width: 1080px;
    margin: auto;
    padding: 2% 5.5%;
    box-sizing: border-box;
    /*margin-bottom: 200px;*/
}

#video:before{
        content: "";
    display: block;
    width: 300%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/kousi.png);
    background-position: left center;
    background-repeat: repeat-x;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: -1;
    border-top: 5px solid #c98545;
    border-bottom: 5px solid #c98545;
}

#video:after{
     content: "";
    display: block;
    width: 140px;
    height: 450px;
    position: absolute;
    top: -60px;
    right: -5%;
    background-image: url(./Dup/img/ten.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

#page_title .en {
    font-size: 50px;
    top: -30px;
    left: 5%;
    padding-left: 10px;
    /* background-color: black; */
    color: #43516a;
    font-family: rogo;
    background-color: #43516a;
    color: white;
}

#page_title .jp span {
    color: #f43a3a;
}

.txt_color2, .hvr_txt_color2:hover {
    color: #e51612;
}

header{
    background-color: rgba(255,255,255,0.2);
}

h3.intro_title{
        font-size: 26px;
    color: #607ea3;
    font-weight: bold;
}

#intro + .top_title:before{
   content: "";
    display: block;
    width: 90%;
    height: 200%;
    position: absolute;
    top: 90%;
    left: 43%;
    background-image: url(./Dup/img/futo2.png);
    background-position: right center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%) scale(-1, 1) rotate(-1deg);
    background-size: contain;
    pointer-events: none;
}

.top_title {
    height: 350px;
}

.more .more_item:hover .icon-right.after:after {
    color: #4d6582;
}

.border_white, .hvr_border_white:hover {
    border-color: #9d9d9d;
}

#footertxt, #h1txt{
    color: black;
}

.dec{
    display: block;
    font-size: 14px;
}

.linkStyle{
color: #607ea3;
font-weight: bold;
}

#page10 .con_box.hgs{
    max-width: 700px;
}

footer .scr {
    color: black;
}

.scroll_d > span {
    background-color: rgba(0,0,0,0.5);
}

.sns_links {
    left: 85%;
    z-index: 1;
}

/*--20221117 correct start--*/

.sm-slider {
    transform: scale(1.1);
}

/*--20221117 correct end--*/

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

#main_img:after {
    background-size: 52%, 30%, 42%;
}

#video:after {
    width: 100px;
    height: 450px;
    top: -100px;
    right: -1%;
}

.sns_links li {
    width: 25%;
}

.sns_links {
    left: 75%;
}

.cate_list li:nth-of-type(4n) {
    margin-right: 0%;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#main_img:after {
    background-size: 90%, 45%, 45%;
    background-position: left bottom, top right, 25% 90%;
}

.intro_right:before {
    height: 200px;
}

#video:after {
    width: 70px;
    height: 320px;
    top: -150px;
    right: -1%;
}

.top_title {
    height: 150px;
}

#intro + .top_title:before {
    width: 100%;
    height: 120%;
    top: 55%;
    left: 48%;
}

#page_title .en {
    font-size: 33px;
    top: -36px;
    left: 0%;
}

.sm-slider li span {
    width: 131%;
    left: -120px;
        background-position: 53% 50% !important;
}

.sns_links {
    left: 55%;
    max-width: 140px;
    bottom: 80px;
}

.sns_links li {
    width: 25%;
}

}