/* ---------- font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap');

:root{
    --font-jp: 'Zen Kaku Gothic New', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    --font-en: 'Jost', 'Zen Kaku Gothic New', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	/*font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";*/
}
body, .font_sans-serif, .font_serif{
    font-family: var(--font-jp);
    font-weight: bold;
}
.font_en, a[href^="tel:"]{
    font-family: var(--font-en);
}
.f_sitemap_inner {
    max-width: 1280px;
}



/* ---------- color ---------- */

.linkStyle{color: #1F2653;transition: opacity .3s;text-decoration: underline;}
.linkStyle:hover{opacity: 0.7}

:root {
    --normal: #1F2653;
    --color1: #FBF500; /* メインカラー */
    --color2: #21A6E3; /* サブカラー */
    --color3: #D91B7F; /* アクセントカラー1*/
    --color4: #1F2653; /* アクセントカラー2*/
}

.border_color1, .hvr_border_color1:hover {
    border-color: var(--normal);
}

#con3 .title .en, .box_title1 {
	color: var(--normal);
}
#cms_3-b .cate_title, #cms_2-b .cate_title, #cms_6-a .cate_title, .bg_color_normal, #page10 .sitemap li a, .pagetop{
    background-color: var(--normal);
}
#cms_3-b .cate_box {
    border-color: var(--normal);
}
#con1,#con3{
    background-color: #fff;
}
#con2, #topCms, #sp_nav, .all_contents, .pagetitle {
    background-color: var(--color2);
}
.topTxt1{
    background-color: var(--color3)!important;
}
.topTxt1 .arrow{
    color: var(--color3)!important;
}
#con2, #con2 .txt_color2, .cmstitle{
    color: #fff;
}
.cms_6-b .cate_box:first-of-type {
    border-radius: 10px 10px 0 0;
}
.cms_6-b .cate_box:first-of-type .box_txt1 {
    border-radius: 10px 0 0 0;
}
.cms_6-b .cate_box:first-of-type .box_txt2 {
    border-radius: 0 10px 0 0;
}
.cms_6-b .cate_box:last-of-type {
    border-radius: 0 0 10px 10px ;
}
.cms_6-b .cate_box:last-of-type .box_txt1 {
    border-radius: 0 0 0 10px;
}
.cms_6-b .cate_box:last-of-type .box_txt2 {
    border-radius: 0 0 10px 0;
}
#cms_6-b .cate_box:first-of-type {
    border-radius: 10px 10px 0 0;
}
#cms_6-b .cate_box:first-of-type .box_txt1 {
    border-radius: 10px 0 0 0;
}
#cms_6-b .cate_box:first-of-type .box_txt2 {
    border-radius: 0 10px 0 0;
}
#cms_6-b .cate_box:last-of-type {
    border-radius: 0 0 10px 10px ;
}
#cms_6-b .cate_box:last-of-type .box_txt1 {
    border-radius: 0 0 0 10px;
}
#cms_6-b .cate_box:last-of-type .box_txt2 {
    border-radius: 0 0 10px 0;
}


/* ---------- all ---------- */
.font_14 {
    font-size: 16px;
}
.pagetop{
    right: 52px;
}
body{letter-spacing: 1px;background-color: var(--color5);line-height: 1.7;overflow: hideen;}
.logo1 {
    max-width: 55px;
}
.header {
    position: absolute;
}
.header-in{
    background: none;
    box-shadow: none;
    width: 100%;
}
.header-in .txt_color_nomal, .header-in .txt_color3{
    color: #fff;
}
.menu_btn{
    position: fixed;
    top: 71px;
}
#sp_nav .txt_color_nomal {
    color: var(--normal);
}
#sp_nav .txt_color3 {
    color: var(--color3);
}
#sp_nav .sp_nav_inner .menu__header .logo3 img {
    max-width: 69px;
}
.pagetitle_img {
    background-image: none !important;
}

#main_img {
    overflow: hidden;
    background-image: url(../img/bg3.png),url(../img/bg2.png);
    background-size: 700px,cover;
    background-position: bottom, center;
    background-repeat: repeat-x, repeat;
     /*background-image: url(../img/bg1.png);
    background-size: 1000px;
        background-position: top 0 left 0;
        background-repeat: repeat;
        animation: bgloop 20s linear infinite;*/
}
#sp_nav, #con2, .pagetitle{
    background-image: url(../img/bg1.png);
    background-size: 800px;
        background-position: top 0 left 0;
        background-repeat: repeat;
        animation: bgloop 20s linear infinite;
}
@keyframes bgloop {
	0% {background-position: top 0 left 0;}
	100% {background-position: top -800px left 800px;}
}

.logo2 img {
    max-width: 92px;
}
.f_contact_box .font_16.txt_color1 {
    margin-top: 13px;
    color: var(--color3);
}


/* ---------- title1 ---------- */
/*title1*/
#con1 h2, #con2 .txt_color2, #con3 .title .en{
    font-size: clamp(22px, 3.4vw, 62px);
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 1.4;
}

/* ---------- top ---------- */
#main_img {
    height: 92vh;
}
.item_box {
    width: 90%;
    max-width: 1300px;
    height: 92vh;
    position: relative;
    margin: auto;
}
.item1{
    width: max(59vw,1000px);
    top: 42%;
}
.item2 {
    width: max(24vw, 390px);
    top: 1%;
    left: 4%;
    z-index: -1;
}

#con1 h2{
    margin-top: 20px;
}
.topTxt1{
    font-size: 32px;
    padding: 11px 25px 11px;
}
.arrow_box {
    margin-top: 20px;
    margin-bottom: -146px;
    display: block;
    position: relative;
    z-index: 1;
}
.arrow_box img{
    width: 50px;
}

.con1_squ{
    display: none;
}
#con3 .box .img {
    border: 5px solid var(--color2);
}

.blog_wrap {
    padding: 5%;
    border-radius: 20px;
    background-color: #fff;
    margin: auto;
}
.width_1280-max {
    width: 86%;
}
.c-btn {
    border-color: var(--normal);
    background-color: var(--normal);
    color: #fff;
}
.cmstitle .en {
    font-weight: bold;
}


/* ---------- anim ---------- */
.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);}
}

@keyframes realisticVibrate {
  0% { transform: translate(0, 0); }
  2% { transform: translate(-1px, 1px); }
  4% { transform: translate(2px, -1px); }
  6% { transform: translate(-2px, 1px); }
  8% { transform: translate(1px, -2px); }
  10% { transform: translate(-1px, 2px); }
  12% { transform: translate(2px, 1px); }
  14% { transform: translate(-2px, -1px); }
  16% { transform: translate(1px, 2px); }
  18% { transform: translate(-1px, -2px); }
  20% { transform: translate(0, 0); }

  /* 停止期間 */
  21% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}
.vibrate-realistic, #fix_bnr a:hover img {
  animation: realisticVibrate 2s infinite;
  display: inline-block;
}

/*----jojo start-------*/  画像サイズ100×1200px

.sw-Sidetext {
    left: 0;
    width: 100%;
}

.sw-Sidetext {
    position: fixed;
    top: 0;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.sw-Sidetext span.sidetext-left {
    left: 0;
    background: url(../img/left.png) repeat-y top center/40px;
    animation: sidetext 30s linear infinite;
}

.sw-Sidetext span.sidetext-right {
    right: 0;
    background: url(../img/left.png) repeat-y bottom center/40px;
    animation: sidetext 30s linear infinite reverse;
}

.sw-Sidetext span {
    content: "";
    position: fixed;
    top: 0;
    width: 40px;
    height: 100%;
    will-change: background-position-y;
}


@keyframes sidetext {
0% {
    background-position-y: 0;
}

100% {
    background-position-y: 480px;
}
}

/*----jojo end-------*/


/* ---------- under ---------- */
#cms_5-f .cate_box .open_bt .box_title1::before, .cms_5-f .cate_box .open_bt .box_title1::before{
    display: none;
}
#cms_5-f .cate_box .open_bt .box_title1, .cms_5-f .cate_box .open_bt .box_title1{
    margin-left: 45px;
}
.all_contents .info {
    border: none;
}



/* ---------- tablet ---------- */
@media screen and (max-width: 768px){
.menu_btn {
    top: 19px;
    right: 20px;
}
#main_img, .item_box {
    height: 400px;
}
#main_img{
    background-size: 800px, cover;
}
.item1 {
    width: 92%;
    top: 42%;
}
.item2{
    width: 40%;
}
#con1 h2 {
    margin-top: 28px;
    text-align: center;
}
.topTxt1 {
    font-size: 24px;
}
#con1{
    padding-top: 20px;
}
#con3 .title .en {
    font-size: clamp(22px, 6.4vw, 62px);
    margin-bottom: 15px;
}

#con3 .box .icon {
    margin-top: -30px;
}
#con3 .box .icon .width_100 {
    width: 59px;
}
#con3 .box .img {
    border: 5px solid var(--color2);
    height: 200px !important;
}
.logo2{
    text-align: center;
}
}

/* ---------- mobile ---------- */
@media screen and (max-width: 667px){
#fakeloader .fl{
    max-width: 111px;
}
.header .logo1{
    padding: 0;
}
#main_img, .item_box {
    height: 85vh;
}
#main_img {
    background-size: 512px, cover;
}
.topTxt1 .arrow{
   left: 45%;
}
.item_box{
    width: 100%;
}
.item1 {
    width: 100%;
    top: 50%;
    padding-right: 3%;
}
.item2 {
    width: 55%;
    top: -14%;
    left: 22%;
}
.fv_item1_sp2{
    width: 70%;
    margin: auto;
}
.topTxt1 {
    font-size: 17px;
}
.arrow_box{
    margin-bottom: -84px;
}
.arrow_box img {
    width: 31px;
}
#con3{
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
}
#con3 .title .en{
    font-size: clamp(37px, 6.4vw, 62px);
}
#con3 .box .img{
    height: 260px!important;
}
.cmstitle {
        padding-bottom: 0;
        margin-bottom: 20px;
    }
.cmstitle .en {
    font-size: 22px;
}
.logo2 a{
    max-width: 65px;
    margin-bottom: 23px;
}
.footer {
    padding: 150px 0px 26px;
}
.logo1 {
    max-width: 48px;
}
.pagetop{
    right: 5px;
    bottom: 106px;
}
.pagetitle h2 {
    font-size: 24px;
    letter-spacing: 0px;
}
.f_contact_img {
    height: 287px;
}
}


/* youtube ---------------------------------------------------------------------------------------------*/
.youtube{
 	position: relative;
	/*max-width: 780px;*/
	width: 70%;
	text-align: center;
	margin: 3% 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%;
}
@media screen and (max-width: 667px){
.youtube{width: 90%;margin: 7% auto 0%;}
}

/* fix_bnr ---------------------------------------------------------------------------------------------*/
#fix_bnr {
    bottom: 30px;
    right: 0;
    left: 0;
    z-index: 10;
    width: 70%;
    max-width: 450px;
    transition: 0.5s;
    opacity: 1;
    margin: auto;
}
#fix_bnr.scroll{
    opacity: 1;
    bottom: 0px;
    max-width: 500px;
}
#fix_bnr.close{
    opacity: 0;
    z-index: -1;
}
@media screen and (max-width: 768px){
#fix_bnr{
    max-width: 400px;
}
#fix_bnr.close{
    transform: translateX(200px);
}
}
@media screen and (max-width: 667px){
#fix_bnr {
    width: 77% !important;
    right: auto;
    left: 20px;
    margin: auto;
    bottom: 10px;
    opacity: 0;
}
}
/* fix_bnr end ---------------------------------------------------------------------------------------------*/