﻿/* all page */
/* color */
.txt_color1{color: #ffacbc;} /* メインカラー */
.txt_color2{color: #ff8300;} /* サブカラー */
.txt_color3{color: #ff8300;} /* アクセントカラー1 */
.txt_color4{color: #E6EAED} /* アクセントカラー2 */

/* background-color */
.bg_color1{background-color: #ffacbc;} /* メインカラー */
.bg_color2{background-color: #ff8300;} /* サブカラー */
.bg_color3{background-color: #ff8300;} /* アクセントカラー1 */
.bg_color4{background-color: #E6EAED} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}

/* border-color ※!important */
.border_color1{border-color: #ffacbc;}
.border_color2{border-color: #ff8300;}
.border_color3{border-color: #ff8300;}
.border_color4{border-color: #E6EAED}

.hvr_bg_color1:hover{background-color: #ffacbc;} /* メインカラー */

h2,h3{
	font-family: 'Kiwi Maru', serif;
	font-weight: 500 !important;
}

.linkStyle{
    color: #333;
    text-decoration: underline;
}

.hamburger{
    background-color: #ffacbc;
}
.hamburger.head_fix {
    border-radius: 10px;
}
.fat-nav li:last-child a {
    border-bottom: 1px solid #fff !important;
    border-top: 1px solid #fff !important;
}


/* top ----------------*/

/* header */
.index_header .nav_box{
	border-radius: 0 0 400px 0;
    height: 20%;
}

/* main img */
#main_img .inner video{
	border-radius: 50px;
}
.main_kaiten {
    width: 15vw;
    height: auto;
    display: block;
    position: absolute;
    right: 33%;
    top: 33%;
    transform: translate(50%,-50%);
    z-index: 1000;
}
.kaiten {
    width: 100%;
    height: auto;
    animation: 100s linear infinite kaiten;
}
@keyframes kaiten {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* main */

/* intro */
#catch{
	margin-top: 100px;
	border: none;
}
#catch .catch_img{
	border-radius: 20px;
}
#catch .catch_txt h2 span{
	opacity: 1;
}
#catch .catch_txt h2{
	color: #59331A;
	font-weight: 500;
}
#catch .catch_txt p{
	color: #59331A;
}
#catch span{
	border: none;
}


.contents_illust{
	position: relative;
}
.contents_illust::before{
	content: "";
	background-image: url("./Dup/img/contents01.png");
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 150px;
	width: 150px;
	height: 150px;
	position: absolute;
	bottom: 10px;
	right: 390px;
}
.contents_illust::after{
	content: "";
	background-image: url("./Dup/img/contents01_2.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: 50px;
	width: 50px;
	height: 100px;
	position: absolute;
	bottom: 30px;
	right: 500px;
	animation: fuwafuwa 5s infinite ease-in-out .8s alternate;
	transition: 1.5s ease-in-out;
}
@keyframes fuwafuwa {
  0% {
	  transform-origin: top;
    transform:translate(0, 0) rotate(-3deg);
  }
  100% {
	  transform-origin: top;
    transform:translate(0, 0) rotate(20deg);
  }
}
.demo_item{
	background-image: url("./Dup/img/contents3.png");
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 150px;
	width: 150px;
	height: 150px;
	position: relative;
	display: block;
}
.demo_item.anime{
    animation-name: upDown;
    animation-iteration-count: infinite;
    animation-duration: 0.1s;
    animation-direction: alternate;
    animation-timing-function: steps(2);
    transition-duration: .3s;
    transition-property: transform;
}
.demo_wrap{
	display: block;
    position: absolute;
	bottom: 10px;
	left: 150px;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 10s;
    animation-iteration-count: 1;
}
.demo_wrap[data-order="left"] {
    animation-name: GoLeft;
}
.demo_wrap[data-order="right"] {
    animation-name: GoRight;
}

[data-order="right"] > .demo_item {
    transform: rotateY(180deg);
}
@keyframes GoLeft {
    0% {
        left: 40%;
    }
    100% {
        left: 7%;
    }
}
@keyframes GoRight {
    0% {
        left: 7%;
    }
    100% {
        left: 40%;
    }
}

@keyframes upDown {
    0% {
        top: 0;
    }
    100% {
        top: 2px;
    }
}



/* contents */
.contents_img figure{
	border-radius: 20px;
}
#contents .contents_inner h2{
	color: #59331A;
	font-weight: 500;
}
#contents .contents_inner h2 span {
    width: 2px;
}
#contents .contents_inner .contents_txt p{
	color: #59331A;
}
#contents .contents_inner .contents_txt p{
	border-radius: 20px;
}
#contents2 .contents_txt p{
    opacity: 1;
}

#contents2 .box{
	position: relative;
}
#contents2 .box::before{
	content: "";
	background-image: url("./Dup/img/kaiten2_2.png");
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 200px;
	width: 200px;
    height: 200px;
	position: absolute;
	bottom: -100px;
	left: 30px;
	z-index: 10;
    animation: 100s linear infinite kaiten;
}
@keyframes kaiten {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}


/* topcms */
.top_cms_box .cms_1-a figure{
	border-radius: 10px;
}
.top_cms_box .cms_2-a figure a img{
	border-radius: 10px;
}

.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: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;
}

.more span.before {
    border-radius: 10px;
}
.more span.after{
	display: none;
}
.more {
	transition: all 0.3s ease 0.1s;
}
.more:hover{
	box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
	transform: translateY(-5px);
	transition-delay: 0s;
}


/* footer */
p.gotop a{
	border-radius: 10px;
}
#footer_info .inner {
    border-radius: 20px;
}
#footer_info .inner .border {
    border-radius: 20px;
}
#footer_info .bg_white_opa {
    background-color: rgba(255,255,255,0.8);
}


/* under page */
#page_title .page_title_img {
    border-radius: 10px;
}
.cate_list{
    padding-top: 10px;
}

/* cms1 */
.pager li a {
    border-radius: 10px;
}

/* cms2 */
#cms_2-a figure,#cms_2-a img{
    border-radius: 10px;
}

/* cms3 */
#cms_2-e .cate{
    background-color: #fff;
}
#cms_2-e .box_title span{
    background-color: #fff;
}

/* cms4 */
#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: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;
}

/* cms5 */
#cms_6-a .box_wrap{
    border-radius: 10px;
}

/* page7 */

/* page8 */
#contact_tel a{
    border-radius: 10px;
}

/* page9 */

/* page10 */
#page10 ul{
    padding-top: 10px;
}


/* IE */
@media all and (-ms-high-contrast: none){
    #cms_2-a .cate .cate_title{
        padding-top: 10px !important;
    }
    #cms_6-a .cate .cate_title{
        padding-top: 10px !important;
    }
    #contact_tel a{
        padding-bottom: 15px;
    }
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	.index_header .nav_box {
		border-radius: 0 0 200px 0;
	}
	header {
		padding-bottom: 0%;
	}
	#main_img .inner video {
		border-radius: 30px;
	}
	.main_kaiten {
		right: 43%;
		top: 28%;
	}
	
	.contents_illust::before {
		background-size: 100px;
		width: 100px;
		height: 100px;
		bottom: 5px;
		right: 150px;
	}
	.contents_illust::after {
		background-size: 35px;
		width: 35px;
		height: 65px;
		bottom: 20px;
		right: 224px;
	}
	.demo_item {
		background-size: 120px;
		width: 120px;
		height: 120px;
	}
	.demo_wrap {
		bottom: 5px;
	}
	
	#contents2 .box::before {
		background-size: 160px;
		width: 160px;
		height: 160px;
	}
	
	.all_header #global-nav ul li {
        width: auto;
    }
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	.hamburger {
		top: 15px !important;
		right: 5px !important;
		padding: 13px !important;
	}
	.hamburger__icon {
		margin-top: 10px !important;
    	margin-bottom: 10px !important;
	}
	
	.index_header .nav_box {
		border-radius: 0;
		height: auto;
	}
	.main_kaiten {
		right: 16%;
		top: 75%;
		width: 23vw;
	}
	#main_img .inner {
		padding-bottom: calc(0%*616/996) !important;
	}
	#main_img .inner video {
		width: 98% !important;
		margin-left: 1%;
	}
	
	#catch {
        margin-top: 20px;
    }
	
	.contents_illust::before {
		background-size: 50px;
		width: 50px;
		height: 50px;
		bottom: 0px;
		right: 80px;
	}
	.contents_illust::after {
		background-size: 20px;
		width: 20px;
		height: 42px;
		bottom: 6px;
		right: 112px;
	}
	.demo_item {
		background-size: 60px;
		width: 60px;
		height: 60px;
	}
	.demo_item.anime {
		animation: none;
	}
	.demo_wrap {
		bottom: 3px;
		animation-duration: 6s;
	}
	
	#contents2 .box::before {
		background-size: 110px;
		width: 110px;
		height: 110px;
		bottom: -70px;
    	left: 10px;
	}
	
    .cms_6-b .cate_box:first-of-type .box_txt1 {
        border-radius: 10px 10px 0 0;
    }
	.cms_6-b .cate_box:last-of-type .box_txt1 {
        border-radius: 0;
    }
    #cms_6-b .cate_box:first-of-type .box_txt1 {
        border-radius: 10px 10px 0 0;
    }
    #cms_6-b .cate_box:last-of-type .box_txt1 {
        border-radius: 0;
    }
	
}

/*20240913公開後修正*/
#foot_banner {
    z-index: 99;
    right: 100px;
}
#foot_banner a {
    box-sizing: border-box;
    border-radius: 50px;
}
.main_copy {
    width: 30vw;
    height: auto;
    display: block;
    position: absolute;
    left: 19%;
    top: 15%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#copyright{padding-bottom: 80px;}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#foot_banner {
    right: auto;
    left: 20px;
    max-width: 250px;
}
.main_copy {
    width: 54vw;
    left: 1%;
    top: 32%;
    transform: none;
}
}


