/*-------------------------------------------------
個別
---------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&display=swap');
@import url("https://use.typekit.net/ilk8vuz.css");

.font_en {
    font-family:'Oswald',"futura-pt", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro," メイリオ", Meiryo, Osaka," ＭＳ Ｐゴシック", MS PGothic," sans-serif";
}
@font-face {
    font-family: 'EnglishGothic17ThC-Da9E';
    font-style: normal;
    font-weight: 900;
    src: url('../Dup/img/EnglishGothic17ThC-Da9E.woff') format('woff'),
        url('../Dup/img/EnglishGothic17ThC-Da9E.ttf')  format('ttf');
    font-display: swap;
}
body{overflow: hidden;}
#wrap{
    opacity: 0;
}
#fakeloader{
	z-index: 9999;
	animation: fadeout 3s ease forwards;
        background-color: #003F71;
}
#fakeloader .fl{
	position: absolute!important;
	top: 50%!important;
	left: 50%!important;
	transform: translate(-50%,-50%)!important;
	width: 100%!important;
	max-width: 300px;
	animation-name: loader;
	animation-duration: 3s;
	animation-timing-function: ease;
}
@keyframes fadeout{
	50% {opacity: 1;}
	98%,100% {opacity: 0;}
}
@keyframes loader{
	0% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 0;}
}
body{background-color: #F3FAFB;}
body,h1,h2,h3,h4{font-weight: 600;}

body{
cursor: none;
}
.cursor,.follower {
border-radius: 50%;
position: fixed; 
top: 0;
left: 0; 
pointer-events: none; 
}
.cursor{
width: 8px;
height: 8px;
background-color: #000;
z-index: 1001;
}
.follower{
width: 40px;
height: 40px;
background-color: #003F71;
z-index: 1000;
}
.follower.is-active{
     background-color: transparent;
     border: solid 1px #003F71;
     transform: scale(1.5);
}
header{background-color: #2a333e!important;}
#main_img{position: relative;}

.button{
        border: solid 2px #003F71;
    box-shadow: 5px 5px 0 #003F71;
    color: #003F71;
}
.button:hover::after {
    box-shadow: inset 0 0 0 15em rgb(0 153 204);
}
.more a:hover{
    transform: translateY(-5px);
}

#top_cms .box{
        margin-bottom: 100px;
        transition: all 0.3s;
}
#contents_box::before,.con2_wrap::before{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100px;
    background-position: 50% 0;
    background-repeat: repeat-x;
    background-size: 1000px;
    background-image: url(./Dup/img/typo1.png);
    top: 0;
    animation: bgroop2 20s linear infinite;
    opacity: 0.2;
}
@keyframes bgroop2{
    0% { background-position: 0% 50%;}
  100% { background-position: -1000px 50%;}
}
.con2_wrap::before{
    background-image: url(./Dup/img/typo2.png);
    background-size: 800px;
    animation: bgroop3 20s linear infinite;
    
}
@keyframes bgroop3{
    0% { background-position: 0% 50%;}
  100% { background-position: 1000px 50%;}
}
.con_wrap{
/*background-image: url(Dup/img/con2_bg.jpg);
    background-size: cover;*/
    position: relative;
}
#contents3{position: relative;}
#contents1 h2,#contents2 h2,#contents3 h3{
        background-color: #003f71;
    padding: 10px 20px;
    color: white;
    font-weight: bold;
    position: relative;
    transform: rotate(-1deg);
    box-shadow: 5px 4px #333;
    margin-bottom: 30px;
        display: inline-block;
}

#contents2 figure {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}
#contents3 figure{
 transition:1s all;
}
#contents3 .con3_box_wrap{
    position: relative;
    padding: 50px;
}
#contents3 .con3_box_wrap::before {
    position: absolute;
    content: "";
    width: 100%;
    top: 100px;
    bottom: 0;
    left: 0;
    background-color: #f3fafb;
border: solid 2px #003f71;
    box-shadow: 5px 5px 0 #003f71;
    z-index: -1;
}
#contents3 figure{border: 5px solid #003f71;}
#main_menu ul li a::before,.cms_title::before,#page_title .page_box::before{content: none;}
#top_cms .cms_title {
    padding-bottom: 20px;
    padding-left: 50px;

}
.cms_title h2{
    font-size: 40px;
    font-family: EnglishGothic17ThC-Da9E;
        color: #fff;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.cms_title p{
    color: #fff;
    font-size: 20px;
    padding-left: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
#main_menu ul li a{
    font-size: 20px;
    text-align: center;
    padding-left: 0;
    font-family: 'Oswald', sans-serif;
    color: #e5e5e5;
}
#main_menu ul li a:hover {
    transform: translateY(-5px);
    color: #0099cc;
    padding-left: 0;
}
.link_box ul{display: block;}
.link_box ul li{
    width: 100%!important;
    height: 57px!important;
    margin-bottom: 10px;
}
.link_box ul li a img{
    width: 100%;
    height: auto;
}
.fa-envelope:before{content: none;}
.spin {
    -webkit-animation: spin 10s linear infinite;
    -moz-animation: spin 10s linear infinite;
    -ms-animation: spin 10s linear infinite;
    -o-animation: spin 10s linear infinite;
    animation: spin 10s linear infinite;
}
@keyframes spin{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.typo{
    font-size: 10rem;
    opacity: 0.2;
    line-height: 1;
    animation-name: slide_img;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes slide_img {
    0%{
        background-position-x: 0;
    }
    100% {
        background-position-x: -40px;
        }
}
.link_box li:hover,.mail_contact_link a:hover{
     animation:shake 0.2s linear 1;
}
@keyframes shake {
	0% { transform:translate(8px, 2px) rotate(0deg);}
	35% { transform:translate(-2px, 3px) rotate(-1deg); }
	70% { transform:translate(10px, -8px) rotate(-1deg); }
	100% { transform:translate(0, 0) rotate(0); }
}
.fadein {
    opacity: 0;
    transform: scale(0.8);
    transition: 0.3s;
    transition-property: opacity,transform;
}
.fadein.fadetrans {
    opacity: 1;
    transform: scale(1);
}
header .button,footer .button{
    border: solid 2px #ffffff;
    box-shadow: 5px 5px 0 #ffffff;
    color: white;
    font-size: 20px;
    position: relative;
    z-index: 1;
}
.footer_wrap{
    background-color: #222;
    position: relative;
}
header{
    background-color: #2e2e2e;}
footer,.footer_cms,#copyright a,#page-top a,#page-top a span{color: #e5e5e5!important;}
header{z-index: 2;}
#main_img{z-index: 0;}
#contents1 h2::before,#contents2 h2::before{
    content: "";
    display: block;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 300px;
    width: 80%;
    height: 300px;
    bottom: -63px;
    right: 140px;
    transform: rotate( 
30deg
);

    background-image: url(Dup/img/item3.png);
    z-index: 1;
    
}
#contents2 h2::before{
    background-image: url(Dup/img/item5.png);
    transform: rotate( 5deg);
bottom: -141px;
    right: 100px;
    
}
.item{
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 300px;
    width: 20%;
    height: 300px;
    bottom: 0;
    right: 73px;
    transform: rotate( 30deg);
}
.item1{
background-image: url(Dup/img/item4.png);
    top: -50px;
    right: 0;
    z-index: 1;
}
.item3{
    background-image: url(Dup/img/item6.png);
    z-index: 1;
    top: -150px;
    right: 20px;
}
.item4{
    background-image: url(Dup/img/item1.png);
    bottom: -170px;
    left: 0;
    height: 400px;
    
}
.item5{
    background-image: url(Dup/img/item7.png);
    top: 10px;
}
#top_cms .more a{
    color: #fff;
    background-color: #0099cc;
    text-transform: uppercase;}
.view_bt_wrap{
    position: absolute;
    bottom: 0px;
    right: 0;
}
.view_bt{
    padding: 10px 20px;
    display: inline-block;
    position: relative;
    bottom: 0;
    right: 0;
    overflow: hidden;
    font-weight: 400;
    font-style: normal;
    z-index: 2;
    color: #fff;
    font-family: 'Oswald', sans-serif;
}
.view_bt::before{
        content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    background-color: #000;
    z-index: -1;
    opacity: 0;
    transition: ease 0.3s;
}
.cms_2-c .link_box a{height: 350px;}
.cms_2-c .link_box a{background-color: #202020;}
.cms_2-c .link_box a:hover .view_bt:before{
        opacity: 1;
    transform: translateX(0%);
}
.cms_2-c .link_box a:hover .link_bg {
    transform: translate(-50%, -50%)scale(1.2);
    opacity: 0.8;
}
header{
    background-image: url(Dup/img/item2.png);
    background-repeat: no-repeat;
    background-position: bottom -20px right -20px;
}
#footer_menu li a{color: #fff;}
.con1_wrap,.con2_wrap{background-color: rgba(255,255,255,0.5);}
.con1_wrap p,.con2_wrap p{
    color: #333;
    
}
.main_box{position: relative;}
.main_box::before{
    background: url(Dup/img/bg_img2.jpg) no-repeat center;/* 画像（ここにfixedは入れない） */
  background-size: cover;/* cover指定できる */
  content: "";
  display: block;
  position: fixed;/* 擬似要素ごと固定 */
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;/* 横幅いっぱい */
  height: 100vh;/* 縦幅いっぱい */
}
#top_cms .top_cms_box:last-of-type{background-color: rgba(255,255,255,0.5);}
.tel_bt,.foot_tel_bt{position: relative;}
.tel_bt::before,.foot_tel_bt::before{
    content: "※営業電話お断り";
    display: block;
    position: absolute;
    bottom: -30px;
    left: 0;
    color: #74ff02;
}
/*-------------------------------------------------
下層
---------------------------------------------------*/
article.width_1280-max{
border: solid 2px #2a333e;
    box-shadow: 5px 5px 0 #2a333e;
    margin-bottom: 100px;
    transition: all 0.3s;
    padding: 50px;
    background-color: rgba(255,255,255,0.7);
    position: relative;
}
article.width_1280-max:before,article.width_1280-max:after{
    content: "";
    display: block;
    position: absolute;
    background-image: url(Dup/img/item3.png);
    background-repeat: no-repeat;
    max-width: 200px;
    width: 20%;
    height: 300px;
right: -50px;
    top: -170px;
    background-size: contain;
}
article.width_1280-max:after{
    bottom: -220px;
    left: -10px;
    background-image: url(Dup/img/item4.png);
    top: inherit;
    transform: rotate(
25deg
);
}
.mail_contact_link a{
    color: #fff;
    max-width: 300px;
    text-align: center;
    padding: 10px;
    font-size: 20px;
    border-radius: 5px;
}
#page_title .page_box{
    padding-left: 0;
}
#page_title h2{
    font-size: 50px;
    text-shadow: none;
    font-family: EnglishGothic17ThC-Da9E;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
#page_title p{
    font-size: 24px;
    text-shadow: none;
        color: #fff;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.button2:hover {
    box-shadow: 0 0 20px #003f71 inset;
}
.cate_list li a{
     overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 padding-left: 10px;
    padding-right: 10px;
}
#page_title .title_img{
    height: 100px;
    background-image: none!important;
}
#page_title .title_img::before{background-image: none;}


#cms_3-b .swiper-button-prev,#cms_3-b .swiper-button-next{
	top: 50%;
	transform: translate(0,-50%);
	width: auto!important;
	height: auto!important;
	font-size: 30px;
	margin-top: 0;
}
#cms_3-b .swiper-button-prev{
	left: -30px;
}
#cms_3-b .swiper-button-next{
	right: -30px;
}
#cms_3-b .swiper-button-prev, #cms_3-b .swiper-button-next,#cms_3-b .swiper-button-prev,#cms_3-b .swiper-container-rtl .swiper-button-next{
	background-image:none;
}
.modal_bt{cursor: pointer;}
.modal_bg {
    top: 0;
    left: 0;
    background-color: rgba(106,106,106,0.8);
    z-index: 9;
    padding-top: 100px;
    overflow-y: auto;
}
.modal_box {
    z-index: 10;
    border-radius: 20px;
}
.modal_box .close {
    top: 10px;
    right: 10px;
    cursor: pointer;
}
#cms_3-e .box_wrap > .cate_box:nth-of-type(1),#cms_3-e .box_wrap > .cate_box:nth-of-type(2){width: 50%!important;}
/*-------------------------------------------------
tab
-----------------------------------------------------*/
@media screen and (max-width: 768px){
#main_img,#video{height: 65vw!important;}
.typo{font-size: 5rem;}
header{
    background-color: #2a333e!important;
    border: none;
}
footer .link_box li {
    max-width: none;
}
footer .link_box ul{display: flex;}
footer .link_box ul li {
    width: 50%!important;
}
.head_box,#logo{
    max-width: 200px;
    text-align: center;
}
.hamburger {
    top: 56px;
}
.hamburger__icon, .hamburger__icon:before, .hamburger__icon:after {
    background-color: #fff!important;
}
.hamburger.active .hamburger__icon {
    background-color: transparent!important;
}
.fat-nav ul{background-color: #2a333e!important;}
.fat-nav li a{color: #fff;}
.cate_list a{
     overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.cursor,.follower{display: none;}
.cms_title h2 {
font-size: 2rem;
}
.cms_2-c .link_box {
    padding: 50px;
}
#contents1 h2::before, #contents2 h2::before{
    bottom: -83px;
    right: 100px;
}
#contents2 h2::before {
right: 45px;
    bottom: -159px;
}
header{background-image: none;}
.fat-nav ul{
        background-image: url(Dup/img/item2.png);
    background-repeat: no-repeat;
    background-position: bottom -20px right -20px;
    background-size: 400px;
}
.cms_2-c .link_box a {
    height: 300px;
}
article.width_1280-max:before{
    right: -10px;
    top: -120px;
}
.fat-nav__wrapper ul li:last-of-type a{border-color: #fff;}
.fat-nav__wrapper ul li:last-of-type a{position: relative;}
.fat-nav__wrapper ul li:last-of-type a::before{
content: "※営業電話お断り";
    display: block;
    position: absolute;
    bottom: -25px;
    color: #74ff02;
    left: 0;
}
}



/*-------------------------------------------------
sp
-----------------------------------------------------*/
@media screen and (max-width: 667px){
.typo {
    font-size: 2rem;
}
#contents3 .con3_box_wrap {
    padding: 20px;
}
#top_cms .more a{max-width: 300px;}
#top_cms .box{padding: 20px;}
#top_cms .junkie{padding: 0;}
.cms_title p {
    font-size: 1rem;
}
#fakeloader .fl{max-width: 200px;}
footer .link_box ul {
    display: block;
}
footer .link_box ul li {
    width: 100%!important;
}
article.width_1280-max{padding: 20px;}
#page_title h2 {
    font-size: 24px;
}
#page_title p {
    font-size: 16px;
}
.head_box, #logo {
    max-width: 170px;
}
.main_box {
    padding-top: 50px;
}

.hamburger {
    top: 25px;
}
#top_cms .cms_title {
    padding-bottom: 0;
    padding-left: 0;
}
.cms_2-c .link_box {
    padding: 20px;
}
#contents1 h2::before, #contents2 h2::before {
    bottom: -133px;
    right: 130px;
    width: 60%;
}
#contents2 h2::before{
    bottom: -193px;
    right: 90px;
}
.item1 {
    right: 57px;
}
.item3 {
    top: -80px;
    right: 30px;
    width: 30%;
}
.item4 {
    bottom: -260px;
    right: 60px;
    left: inherit;
}
.item5 {
    top: 5px;
        width: 30%;
}
.fat-nav ul{

    background-size: 250px;
}
article.width_1280-max:before {
    right: -10px;
    top: -60px;
}
article.width_1280-max:after {
    bottom: -270px;
    left: -40px;
}
.cate_title{text-align: left;}
.foot_tel_bt::before{left: 30px;}
}


/*-------------------------------------------------
IE
-----------------------------------------------------*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none){
#contents1 h2::before{bottom: -50px!important;}

}


/*-------------------------------------------------
Firefox
-----------------------------------------------------*/
@-moz-document url-prefix(){

}body{background-color: #F3FAFB;}