@import url("reset.css");
@import url("animate.min.css");
@import url('https://fonts.cdnfonts.com/css/bauhaus-93');

:root{
	/* color */
	--color_white:#ffffff;
	--color_gray:#EFEFEF;
	--color_black:#000000;
	--color_blue_01:#2A5993;
	--color_blue_02:#061728;
	--color_blue_03:#1832B2;
	--color_yellow:#C4C985;
	--color_red:#A84335;
	--color_green:#729B78;
	
	/* font */
	--font_Lato:"Lato", sans-serif;
    --font_Rock:"Rock Salt", cursive;
	--font_NotoSansJP:"Noto Sans JP", sans-serif;
	--font_Bauhaus:"Bauhaus 93", sans-serif;
}

body{ width: 100%; margin: auto; font-family: var(--font_NotoSansJP); background-color: var(--color_white);}

.fp-watermark{ display: none !important;}

p{ font-size: 14px; font-weight: normal; letter-spacing: 0.1em; text-align: left; color: var(--color_black);}
p.indent-1{ padding-left:1em; text-indent:-1em;}
p.indent-15{ padding-left:1.5em; text-indent:-1.5em;}
p.not{ text-align: center; margin: 50px auto; font-size: 16px;}
p.not.white{ color: var(--color_white);}
a{ text-decoration: none; transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; outline: none; color: var(--color_black);}
a:hover{ transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out;}

p a{ text-decoration-line: underline;}
p a:hover{ opacity: .3;}

.clearfix{ *zoom: 1;}
.clearfix:before,
.clearfix:after{ display: table; line-height: 0; content: "";}
.clearfix:after{ clear: both;}

.forPC{ display: block;}
.forSP{ display: none;}

/* btn start */
.form-btn-box,
.more-btn-box{ width: 100%; text-align: center; margin: 60px 0 0;}
.form-btn-box .form-btn,
.more-btn-box .more-btn{ display: inline-block; width: 100%; max-width: 170px; position: relative;}
.form-btn-box .form-btn::before,
.more-btn-box .more-btn::before{ content: ""; width: 10px; aspect-ratio: 1 / 2; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; background-image: url("../images/arrow01.png"); background-size: 100%; background-position: center; background-repeat: no-repeat;}
.form-btn-box .form-btn::after,
.more-btn-box .more-btn::after{ position: absolute; left: 0; right: 0; margin: 0 auto; content: ''; width: 100%; height: 2px; background: var(--color_white); bottom: -15px; opacity: 0; visibility: hidden; transition: 0.3s;}
.form-btn-box .form-btn:hover::after,
.more-btn-box .more-btn:hover::after{ visibility: visible; bottom: -5px; opacity: 1;}
.form-btn-box .form-btn p,
.more-btn-box .more-btn p{ font-size: 28px; font-weight: bold; font-family: var(--font_Lato); color: var(--color_white);}
.form-btn-box.black .form-btn::before,
.more-btn-box.black .more-btn::before{ background-image: url("../images/arrow02.png");}
.form-btn-box.black .form-btn::after,
.more-btn-box.black .more-btn::after{ background: var(--color_black);}
.form-btn-box.black p,
.more-btn-box.black p{color: var(--color_black);}
/* btn end */

/* pager start */
.pager-area{ width: 100%; text-align: center; margin: 60px 0 0; display: flex; justify-content: center; align-items: center; /*mix-blend-mode: difference;*/}
.pager-area p{ font-size: 28px; font-weight: bold; font-family: var(--font_Lato); color: var(--color_black); margin: 0 100px;}
.pager-area .preview{ width: 40px; aspect-ratio: 1 / 2; background-image: url("../images/arrow03.png"); background-size: 10px; background-position: center; background-repeat: no-repeat; transition: .2s ease-in-out;}
.pager-area .next{ width: 40px; aspect-ratio: 1 / 2; background-image: url("../images/arrow02.png"); background-size: 10px; background-position: center; background-repeat: no-repeat; transition: .2s ease-in-out;}
.pager-area .preview.disabled,
.pager-area .next.disabled{ display: none}
.pager-area .preview:hover,
.pager-area .next:hover{ background-size: 20px;}
.pager-area.white p{ color: var(--color_white);}
.pager-area.white .preview{ background-image: url("../images/arrow04.png");}
.pager-area.white .next{ background-image: url("../images/arrow01.png");}
/* pager end */

/* title start */
.htitle{ width: 100%; text-align: center; position: relative;}
.htitle p{ position: relative; z-index: 2;}
.htitle p.en{ font-size: clamp(40px, 4vw, 70px); font-weight: bold; font-family: var(--font_Lato); letter-spacing: 1.3px; color: var(--color_black); text-align: center;}
.htitle p.jp{ font-size: clamp(12px, 1vw, 16px); min-height: 28px; letter-spacing: 1.3px; color: var(--color_white); text-align: center; display: inline-block; padding: 2px 30px 4px; box-sizing: border-box; border-radius: 100px; background-color: var(--color_black);}
/* title end */

/* form start */
ul.form{ list-style: none; width: 100%;}
ul.form > li{ display: flex; justify-content: flex-start; align-items: flex-start; border-bottom: 1px solid var(--color_black);}
ul.form > li:last-child{ border-bottom: 0 none;}
ul.form li.form-btn-box{ justify-content: center; align-items: center;}
ul.form li .title{ width: 280px; display: flex; justify-content: flex-start; align-items: center; padding: 28px 20px 20px; box-sizing: border-box;}
ul.form li .title p{ font-size: 16px; margin-right: 10px;}
ul.form li .title span{ font-size: 12px; color: var(--color_white); background-color: var(--color_red); display: inline-block; padding: 1px 10px 2px; box-sizing: border-box;}
ul.form li .form-box{ width: calc(100% - 280px); padding: 20px; box-sizing: border-box;}
ul.form li .form-box select,
ul.form li .form-box input{ width: 100%; background-color: #A9A9A9; padding: 10px; box-sizing: border-box; font-size: 18px; color: var(--color_white); border-radius: 5px; transition: .2s ease-in-out;}
ul.form li .form-box textarea{ box-shadow: none; border: 0px none; resize: none; width: 100%; height: 300px; background-color: #A9A9A9; padding: 10px; box-sizing: border-box; font-size: 18px; color: var(--color_white); border-radius: 5px; transition: .2s ease-in-out;}
ul.form li .form-box textarea:focus,
ul.form li .form-box select:focus,
ul.form li .form-box input:focus{ background-color: var(--color_black); transform: scale(1.1);}
ul.form li.pp{ display: block; padding: 20px 20px 20px; box-sizing: border-box;}
ul.form li.pp .pp-box{ padding-bottom: 20px;}
ul.form li.pp .pp-box p{ font-size: 14px;}
ul.form li.pp .pp-box h2{ font-size: 18px; font-weight: bold; border-left: 5px solid var(--color_blue_03); padding-left: 8px; box-sizing: border-box; line-height: 1.2; vertical-align: middle;}
ul.form li.pp .pp-box ul{ padding-left: 18px; box-sizing: border-box; list-style: square; font-size: 14px;}
ul.form li.pp label{ display: inline-block; padding: 10px 14px 10px 10px; box-sizing: border-box; background-color: #A9A9A9; color: var(--color_white); font-size: 16px; border-radius: 5px;}
ul.form li.pp input[type="checkbox"]{ zoom: 1.5;}
/* form end */

/* Category start */
.cate-area li{ opacity: .6;}
.cate-area li.active{ opacity: 1; font-weight: 500;}
/* Category end */

/* Pick up Blog start */
.pick-blog{ width: calc(100% - 40px); max-width: 680px; height: calc(100vh - 40px); max-height: fit-content; position: fixed; z-index: 111; top: 0; right: -755px; bottom: 0; border-radius: 80px; margin: auto; padding: 80px 80px; box-sizing: border-box; border: 5px solid #000; background-color: var(--color_gray); transition: .3s ease-in-out; display: flex; justify-content: center; align-items: center;}
.pick-blog[data-loading="true"]{ right: -665px;}
.pick-blog.active{ right: 20px; z-index: 10000;}
.pick-blog .circle{ width: 60px; height: 60px; aspect-ratio: 1 / 1; background-color: var(--color_gray); border-radius: 100px; position: absolute; top: 0; left: -30px; bottom: 0; margin: auto;}
.pick-blog .circle::after{ content: ""; position: absolute; top: 0; left: -44px; bottom: 0; margin: auto; width: 80px; aspect-ratio: 189 / 49; background-image: url("../images/blog-arrow01.png"); background-size: 100%; background-repeat: no-repeat; background-position: center;}
.pick-blog.active .circle::after{ background-image: url("../images/blog-arrow02.png");}
.pick-blog .inner{ width: 100%;}
.pick-blog .htitle{ text-align: left; display: flex; justify-content: flex-start; align-items: center;}
.pick-blog .htitle .en{ display: flex; justify-content: flex-start; align-items: center; margin-right: 20px;}
.pick-blog .htitle .en span{ background-image: url("../images/blog-icon.png"); background-position: center; background-size: 100%; background-repeat: no-repeat; display: block; width: clamp(40px, 4vw, 70px); aspect-ratio: 1 / 1; margin: 0 5px;}
.pick-blog .box{ width: 100%; margin-top: 20px; z-index: 2; position: relative;}
.pick-blog .box h2{ font-size: clamp(16px, 2vw, 22px); line-height: 1.4; font-weight: bold;}
.pick-blog .box ul{ width: 100%; padding: 10px 0 0 0; box-sizing: border-box;}
.pick-blog .box ul li{ width: 100%; list-style: none; margin: 15px 0;}
.pick-blog .box ul li:nth-of-type(1){ margin-top: 0;}
.pick-blog .box ul li a{ width: 100%; display: block; font-size: 16px; line-height: 1.2; border-left: 5px solid var(--color_black); padding: 0 26px 0 10px; box-sizing: border-box; position: relative;}
.pick-blog .box ul li a p{ font-size: 14px;}
.pick-blog .box ul li a:hover{ border-left: 5px solid var(--color_blue_01); transform: scale(1.03);}
.pick-blog .box ul li a:after{ content: ""; width: 10px; aspect-ratio: 1 / 1; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; background-image: url("../images/arrow02.png"); background-size: 66%; background-repeat: no-repeat; background-position: center;}

@media (min-width: 920px) and (max-height: 830px) {
	.pick-blog .box ul li:nth-of-type(n+3){ display: none;}
}
/* Pick up Blog end */

/* cta start */
.cta-area{ background-color: var(--color_black); padding: 15px 0; box-sizing: border-box; overflow-x: hidden; position: relative; z-index: 2;}
.cta-area #ticker{ align-items: center; color: #fff; display: flex; height: 40px; line-height: 40px; width: 100%; white-space:nowrap; z-index: 1;}
.cta-area #ticker ul{ animation: flowing 60s linear infinite; font-size: 20px; transform:translateX(100%); margin: 0; padding: 0 3px;}
.cta-area #ticker ul li{ display: inline-block; padding: 0 5px; transition: .3s ease-in-out;}
.cta-area #ticker ul li:hover{ transform: scale(1.05);}
.cta-area #ticker ul li a{ display: block; padding: 5px 20px; border: 1px solid var(--color_white); box-sizing: border-box;}
.cta-area #ticker ul li h3{ position: relative; font-size: 16px; font-weight: normal; color: var(--color_white); display: flex; justify-content: flex-start; align-items: center;}
/*.cta-area #ticker ul li h3::before{ content: "➡"; width: 20px; font-size: 20px; aspect-ratio: 1 / 1; position: absolute; top: -1px; left: -25px;}*/
.cta-area #ticker ul li h3 span{ display: inline-block; height: 13px; line-height: 10px; font-size: 10px; color: var(--color_black); background-color: var(--color_white); padding: 1px 2px 1px; box-sizing: border-box; margin: 2px 0 0 4px;}
/*.cta-area #ticker ul li.i01 h3::before{ content: "🐶";}
.cta-area #ticker ul li.i02 h3::before{ content: "🐼";}
.cta-area #ticker ul li.i03 h3::before{ content: "🐮";}
.cta-area #ticker ul li.i04 h3::before{ content: "🐷";}
.cta-area #ticker ul li.i05 h3::before{ content: "🐭";}
.cta-area #ticker ul li.i06 h3::before{ content: "🐱";}
.cta-area #ticker ul li.i07 h3::before{ content: "🐹";}*/
@keyframes flowing {
  0% { transform:translateX(0); }
  100% { transform:translateX(-100%); }
}
/* cta end */

/* marker start 
.marker{ background: linear-gradient(transparent 70%, var(--color_yellow_02) 70%);}
/* marker end */

/* header start */
header{ width: 100%; position: fixed; padding: 20px 20px 0 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; z-index: 9999; mix-blend-mode: difference;}
header a.logo{ width: 100%; max-width: 90px; aspect-ratio: 120 / 148; display: block; margin-right: 20px; opacity: 0; z-index: 1; position: relative; background: url("../images/header-logo.png"); background-size: 100%; background-repeat: no-repeat; background-position: center;}
header .navbar{ /*width: 100%; max-width: calc(100% - 120px);*/ background-blend-mode: screen; border-radius: 10px; position: relative; top: 0; left: -1000px; transition: .7s ease-in-out;}
/*header .navbar-container{ display: flex; justify-content: space-between; height: 64px; align-items: center;}*/
header .navbar input[type="checkbox"],
header .navbar .hamburger-lines{ display: none;}
header .menu-items{ order: 2; display: flex; padding: 0 0; box-sizing: border-box;}
header .menu-items li.item{ list-style: none; padding: 0 20px; box-sizing: border-box;}
header .menu-items li.item a{ font-size: clamp(14px, 1vw, 16px); color: var(--color_white); font-weight: bold; font-family: var(--font_Lato); letter-spacing: 1.3px; position: relative;}
header .menu-items li.item a::after{ position: absolute; left: 0; right: 0; margin: 0 auto; content: ''; width: 30px; height: 2px; background: var(--color_white); bottom: -15px; opacity: 0; visibility: hidden; transition: 0.3s;}
header .menu-items li.item a:hover::after{ visibility: visible; bottom: -12px; opacity: 1;}
header.active{ padding: 10px 20px 0 20px;}
header.active a.logo{ max-width: 50px;}
header.active .menu-items li.item{ padding: 17px 20px;}
/* header end */

/* service start */
.service-area{ width: 100%; padding: 0 20px; margin-top: 90px; box-sizing: border-box; position: relative; z-index: 0; transition: .5s ease-in-out .1s;}
.service-area .wrap{ width: 100%; display: flex; justify-content: space-between; align-items: flex-start;}
.service-area .wrap .htitle{ width: 100%; max-width: 80px;}
.service-area .wrap .htitle p.en{ writing-mode: vertical-rl; line-height: 1;}
.service-area .wrap .htitle p.jp{ display: none;}
.service-area .wrap .service-list{ width: calc(100% - 80px); display: flex;}
.service-area .wrap .service-list .service-item{ width: calc(100% / 3); background-color: var(--color_gray); margin: 0 2px; padding: 20px 0 0 0; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;}
.service-area .wrap .service-list .service-item h3{ font-size: clamp(18px, 1vw, 20px); font-weight: bold; var(--font_Lato); text-align: center; opacity: 0; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-delay: .3s; animation-duration: .5s; animation-name: fadeOut;}
.service-area .wrap .service-list .service-item.active h3{ animation-name: fadeInDown; opacity: 1;}
.service-area .wrap .service-list .service-item .json{ display: block; max-width: 260px; aspect-ratio: 1 / 1; margin: 20px auto; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-delay: .6s; animation-duration: .3s; opacity: 0; animation-name: fadeOut;}
.service-area .wrap .service-list .service-item.active .json{ animation-name: zoomIn; opacity: 1;}
.service-area .wrap .service-list .service-item .text-box{ width: 80%; background-color: var(--color_white); margin-top: auto; margin: 0 0 -1px -1px; padding: 10px; box-sizing: border-box; flex-grow: 1; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-delay: .3s; animation-duration: .5s; opacity: 0; animation-name: fadeOut;}
.service-area .wrap .service-list .service-item.active .text-box{ animation-name: fadeInUp; opacity: 1;}
.service-area .wrap .service-list .service-item .text-box p,
.service-area .wrap .service-list .service-item .text-box p strong{ font-size: 14px; font-weight: normal;}
@media screen and (max-width:1200px){
	.service-area .wrap{ width: 100%; display: block;}
	.service-area .wrap .htitle{ width: 100%; max-width: 100%; text-align: center; position: relative;}
	.service-area .wrap .htitle p.en{ font-size: clamp(40px, 4vw, 70px); font-weight: bold; font-family: var(--font_Lato); letter-spacing: 1.3px; color: var(--color_black); text-align: center; position: relative; z-index: 2; writing-mode: horizontal-tb; line-height: 1.6;}
	.service-area .wrap .htitle p.jp{ font-size: clamp(12px, 1vw, 16px); min-height: 28px; letter-spacing: 1.3px; color: var(--color_white); text-align: center; display: inline-block; padding: 2px 30px 4px; box-sizing: border-box; border-radius: 100px; background-color: var(--color_black); display: inline-block;}
	.service-area .wrap .service-list{ width: 100%; margin-top: 40px;}
}
/* service end */

/* news start */
.news-area{ width: calc(100% - 40px); margin: 90px auto 0; position: relative; background-color: var(--color_blue_02); border-radius: 25px; padding: 40px 40px; box-sizing: border-box;}
.news-area .htitle{ width: 100%; display: flex; justify-content: flex-start; align-items: center; position: relative; line-height: 1;}
.news-area .htitle p{ position: relative; z-index: 2;}
.news-area .htitle p.en{ color: var(--color_white); margin-right: 20px;}
.news-area .htitle p.jp{ color: var(--color_black); background-color: var(--color_white); display: flex; justify-items: center; align-items: center;}
.news-area table{ width: 100%; border-spacing: 0; margin: 40px auto 0;}
.news-area table th{ font-size: 12px; color: var(--color_white); font-family: var(--font_Lato); text-align: left; font-weight: 300; border-bottom: 1px solid var(--color_white); padding: 5px 10px; box-sizing: border-box;}
.news-area table td{ border-bottom: 1px solid var(--color_white);}
.news-area table td.date,
.news-area table td.cate{ width: 150px; font-size: 16px; color: var(--color_white); font-family: var(--font_Lato); text-align: left; padding: 50px 20px; box-sizing: border-box;}
.news-area table td.title{ width: calc(100% - 300px); padding: 10px;}
.news-area table td.title span{ display: block;}
.news-area table td.title a{ display: flex; justify-content: space-between; align-items: stretch; transition: .1s ease-in-out;}
.news-area table td.title .pd{ padding: 40px 20px; box-sizing: border-box;}
.news-area table td.title span p{ font-size: 16px; color: var(--color_white); font-family: var(--font_Lato); width: 100%;}
.news-area table td.title a p{ font-size: 16px; color: var(--color_white); font-family: var(--font_Lato); width: calc(100% - 18px);}
.news-area table td.title a .arrow{ width: 8px; background-image: url("../images/arrow01.png"); background-position: center; background-size: 100%; background-repeat: no-repeat;}
.news-area table td.title a:hover{ padding: 60px 20px;}
/* news end */

/* footer start */
footer{ width: 100%; padding: 90px 20px; box-sizing: border-box;}
footer p{ font-size: 20px; font-family: var(--font_Lato); text-align: center;}
/* footer end */
.footer-btn{ width: calc(100% - 260px); max-width: 850px; position: fixed; z-index: 100; left: 0; right: 0; top: calc(100% - 100px); margin: auto; display: none;}
.footer-btn .footer-btn-link{ display: flex; justify-content: space-between; align-items: center;}
.footer-btn .footer-btn-link .text{ width: 80%; height: 70px; padding: 10px 30px; box-sizing: border-box; border-radius: 0; background-color: var(--color_black); clip-path: polygon(0 0, 100% 0%, 98% 100%, 0% 100%); border-radius: 4px 0 0 4px; transition: .3s ease-in-out; border: 2px solid var(--color_white); border-right: 0px none; display: flex; justify-content: flex-start; align-items: center; line-height: 1.2;}
.footer-btn .footer-btn-link .text p{ color: var(--color_white); font-size: 16px;}
.footer-btn .footer-btn-link .text span{ display: inline; color: var(--color_yellow);}
.footer-btn .footer-btn-link .i{ width: 20%; height: 70px; padding: 10px 30px; box-sizing: border-box; color: var(--color_white); background-color: var(--color_black); clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%); background-image: url("../images/arrow01.png"); background-size: 10px; background-repeat: no-repeat; background-position: right 20px center; border-radius: 0 4px 4px 0; transition: .3s ease-in-out; border: 2px solid #fff; border-left: 0px none;}
.footer-btn.is-hidden{ pointer-events: none; visibility: hidden; opacity: 0;}
.footer-btn .footer-btn-link:hover .text{ margin-top: -35px;}
.footer-btn .footer-btn-link:hover .i{ margin-top: 15px;}