@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
body{margin: 0px !important;}
h1,h2,h3,h4,h5,h6{margin: 0;}
ul {
    display: block;
    list-stslideyle-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}
#ch{
    padding: 0;
    margin: 0 auto;
	font-family: yu-gothic-pr6n, sans-serif;
    line-height: 2.0;
    font-size: 12px;
    letter-spacing: 1px;
	width: 100%;
    box-sizing: border-box;
    color: #111;
    -webkit-text-size-adjust: 100%;
	overflow: hidden;
}
#ch a {
	text-decoration: none;
	color: #2b2b2b;
}
#ch　a:hover {
	opacity: 1;
}
#ch .clear{
	clear: both;
}
#ch img{
    width: 100%;
    vertical-align: bottom;
    line-height: 0;
}
#ch ul,#ch li {
	list-style: none;
	padding: 0;
	margin: 0;
}
.f-ja {font-family: yu-gothic-pr6n, sans-serif;}
.f-en {font-family: 'Roboto', sans-serif;}
@media only screen and (max-width: 768px)  {
	#ch {
		width: 100%;
		font-size: 11px;
		overflow: hidden;
	}
}

/************************************************************
                #ch_header
************************************************************/
#ch #ch_header .main {
	position: relative;
	max-width: 1050px;
	margin: 3% auto 7%;
	height: fit-content;
}
#ch #ch_header .main .top-pic {
    width: 510px;
    margin: 0 auto;
}
#ch #ch_header .main .ttl {
	position: absolute;
    z-index: 10;	
}
#ch #ch_header .main div:nth-of-type(2) {
    width: 305px;
    top: 20%;
	left: 0%;
}
#ch #ch_header .main div:nth-of-type(3) {
    width: 340px;
    bottom: 6%;
	right: 0%;
}
#ch .main .ttl img{
	width: 100%;
}
#ch #ch_header .check {
	width: 100%;
	border-top: solid 1px #111;
	border-bottom: solid 1px #111;
}
#ch #ch_header .check .check-inner {
	max-width: 1020px;
    margin: 0 auto;
    line-height: 1.0;
    padding: 6px 0% 5px;
}
#ch #ch_header .check .check-inner img {
	width: 485px;
}
@media only screen and (max-width: 768px) {
	#ch #ch_header .main {
		max-width: 100%;
		width: 100%;
		margin: 15% auto 27%;
	}
	#ch #ch_header .main .top-pic {
		width: 88%;
	}
	#ch #ch_header .main div:nth-of-type(2) {
		width: 52%;
		top: -7%;
	}
	#ch #ch_header .main div:nth-of-type(3) {
		width: 62%;
		bottom: -19%;
		right: -.5%;
	}
	#ch #ch_header .check .check-inner {
		max-width: 100%;
		padding: 6px 0% 5px;
	}
	#ch #ch_header .check .check-inner img {
		width: 84%;
		margin-left: 2%;
	}
}
/************************************************************
                contents 
************************************************************/
#ch #contents{
}
#ch #contents .about {
	width: 720px;
	margin: 110px auto 120px;
	font-size: 13px;
	text-align: center;
}
#ch #contents .about img {
	display: block;
	width: 200px;
	margin: 0 auto 5%;
}
@media only screen and (max-width: 768px) {
	#ch #contents .about {
		width: 90%;
		margin: 14% auto 16%;
		font-size: 11px;
	}
	#ch #contents .about img {
		width: 40%;
        margin: 0px auto 7%;
	}
}
/*///////////section///////////////*/
#ch #contents section {
	background: rgb(221 214 206 / 72%);
	padding: 7% 0% 8% 0%;
}
#ch #contents section:nth-of-type(2) {
	background: #fff;
}
@media only screen and (max-width: 768px)  {
	#ch #contents section {
		padding: 15% 0% 8% 0%;
	}
}
/*///////////loop////////////*/
#ch #contents section .loop_wrap {
	position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
  }
#ch #contents section .loop_wrap::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: #111;
	top: 0px;
  }
#ch #contents section .loop_wrap::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: #111;
	bottom: 0px;
  }
#ch #contents section .loop_wrap img {
    height: 64px;
    padding: 11px 0px 5px;
  }
#ch #contents section .loop_wrap div {
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
  }

#ch #contents section .loop_wrap div:nth-child(odd) {
animation: loop 50s -25s linear infinite;
}

#ch #contents section .loop_wrap div:nth-child(even) {
animation: loop2 50s linear infinite;
}
@keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  @keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
  }
@media only screen and (max-width: 768px)  {
	#ch #contents section .loop_wrap img {
		height: 48px;
  }
}
/*//////////////////////////*/
#ch #contents section .img-1 .img {
	position: relative;
}
#ch #contents section .img-1 .img img {
	display: block;
	margin:auto;
}
#ch #contents section .img-1 .img img:nth-child(1) {
	width: 690px;
}
#ch #contents section .img-1 .img .slide-items {
	width: 480px;
	position: absolute;
    top: 50%;
    left: 46%;
    transform: translate(-50%, -50%);
}
#ch #contents section .img-1 {
	width: 960px;
	margin: 220px auto 0;
	display: flex;
	align-items: center;
}
#ch #contents section:nth-of-type(2) .img-1 {
	flex-direction:row-reverse;
}
#ch #contents section:nth-of-type(2) .img-1 .img .slide-items {
    left: 56%;
}
#ch #contents section:nth-of-type(2) .img-1 .name {
    margin-right: -4%;
}
#ch #contents section .img-1 .img {
	
}
#ch #contents section .img-1 .name {
	margin-left: -4%;
    position: relative;
    z-index: 5;
}
#ch #contents section .img-1 .name h3 {
	text-align: center;
	margin-bottom: 10%;
}
#ch #contents section .img-1 .name h3 span {
    display: block;
    font-size: 86%;
	margin-bottom: 5%;
}
#ch #contents section .img-1 .no {
    width: 72px;
    margin: 0 auto 6%;
    display: block;
}
#ch #contents section .img-1 .name p {
    margin: 5% 0 10%;
    text-align: center;
    line-height: 1.0;
}
#ch #contents section .img-1 .name .btn_area {
    width: 240px;
    display: flex;
    justify-content: space-between;
}
#ch #contents section .img-1 .name .btn_area div {
	
}
#ch #contents section .img-1 .name .btn_area .btn {
    width: 100px;
    display: block;
    margin: 0 auto;
}
@media only screen and (max-width: 768px)  {
	#ch #contents section .img-1 {
		display: block;
        margin-top: 30%;
        width: 100%;
	}
	#ch #contents section .img-1 img {
		display: block;
		margin:auto;
	}
	#ch #contents section .img-1 .img img:nth-child(1) {
    width: 92%;
    margin: 0 auto;
	}
	#ch #contents section .img-1 .img .slide-items {
		width: 70%;
		left: 50%;
	}
	#ch #contents section:nth-of-type(2) .img-1 .img .slide-items {
		width: 70%;
		left: 50%;
	}
	#ch #contents section:nth-of-type(2) .img-1 {
		width: 92%;
        margin: 33% auto 0;
	}
	#ch #contents section .img-1 .name {
		margin-left: 0;
		width: 64%;
		margin: 30% auto 0;
	}
	#ch #contents section:nth-of-type(2) .img-1 .name {
		margin: 26% auto 0;
	}
	#ch #contents section .img-1 .name p {
		margin: 0 0 10px;
		font-size: 10px;
	}
	#ch #contents section .img-1 img {
		
    }
	#ch #contents section .img-1 .name .no {
		margin: 0 auto 5%;
        width: 25%;
	}
	#ch #contents section .img-1 .name h3 {
        font-size: 12px;
        margin-bottom: 12%;
    }
	#ch #contents section .img-1 .name h3 span {
		font-size: 10px;
	}
	#ch #contents section .img-1 .name .btn {
        width: 50%;
        margin: 0% auto 8%;
    }
	
}
#ch #contents section .img-3 {
	width: 1100px;
	margin: 130px auto 50px;
}
#ch #contents section .img-3 .img-3-inner {
	width: 540px;
	margin: 0 0 0 auto;
}
#ch #contents section .img-2 {
	width: 1180px;
	margin: 265px auto 180px;
}
#ch #contents section .img-2 .img-2-inner {
	display: flex;
	align-items: start;
	justify-content: space-between;
}
#ch #contents section .img-2 .img-2-inner img:nth-of-type(1) {
	width: 320px;
	/*/transform: rotate(6deg);/*/
	transition: 1.6s all 0s ease;
}
#ch #contents section .img-2 .img-2-inner img:nth-of-type(2) {
	width: 320px;
    /*/padding-top: 168px;/*/
    /*/margin-left: -55px;/*/
	/*/transform: rotate(-4deg);/*/
	transition: 1.6s all 0.5s ease;
}
#ch #contents section .img-2 .img-2-inner img:nth-of-type(3) {
	width: 320px;
    /*/margin-top: -55px;/*/
	/*/transform: rotate(2deg);/*/
	transition: 1.6s all 1s ease;
}
#ch #contents section .img-2 .sub {
	width: 300px;
    margin: 160px 580px 0 auto;
    display: block;
}
@media only screen and (max-width: 768px)  {
	#ch #contents section .img-3 {
		margin-top: 20%;
		margin-bottom: 60%;
		width: 100%;
	}
	#ch #contents section .img-3 .img-3-inner {
		width: 100%;
		display: block;
    }
	#ch #contents section .img-3 .img-3-inner .img-3-img {
		width: 78%;
		margin: 0 0 0 auto;
	}
	#ch #contents section .img-3 .img-3-inner .sub {
		width: 50%;
		bottom: -36%;
		right: auto;
		left: -20%;
	}
	#ch #contents section:nth-of-type(2) .img-3 .sub {
		right: auto;
    }
	#ch #contents section .img-2 {
		position: relative;
        margin-top: 20%;
        margin-bottom: 24%;
        width: 100%;
	}
	#ch #contents section .img-2 .img-2-inner {
		width: 100%;
		display: block;
	}
	#ch #contents section .img-2 .img-2-inner img:nth-of-type(1) {
		width: 50%;
	}
	#ch #contents section .img-2 .img-2-inner img:nth-of-type(2) {
		display: block;
        width: 62%;
        padding: 0;
        padding-top: -17%;
        margin: -8% 0 0 auto;
	}
	#ch #contents section .img-2 .img-2-inner img:nth-of-type(3) {
		display: block;
        width: 45%;
        margin-top: 14%;
        margin-left: 8%;
	}
}

#ch #contents section .img-5 {
    margin-top: 180px;
	margin-bottom: 80px;
}
#ch #contents section .img-5 .img-5-inner {
    width: 900px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
   
}

#ch #contents section .img-5 .img-5-inner .img-5-img {
	width: 52%;
}
#ch #contents section .img-5 .img-5-inner .slide-items {
	width: 100%;
}
#ch #contents section .img-5 .sub {
	position: absolute;
    width: 280px;
    bottom: -24%;
    right: 44%;
}
#ch #contents section:nth-of-type(2) .img-5 .img-5-inner {

}
#ch #contents section:nth-of-type(2) .img-5 .sub {
    bottom: -25%;
    right: 34%;
}
@media only screen and (max-width: 768px)  {
	#ch #contents section .img-5 {
		margin-top: 25%;
		margin-bottom: 20%;
	}
	#ch #contents section .img-5 .img-5-inner {
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	#ch #contents section .img-5 .img-5-inner .img-5-img {
		width: 74%;
		margin: 0 auto 8%;
	}
	#ch #contents section .img-5 .img-5-inner .img-5-tex {
		width: 78%;
		margin: 0 auto;
	}

}

/************************************************************
                js
************************************************************/
/*////pcview////*/
   #ch .spview {
		display: none;
	}	
	#ch .pcview {
		display: block;
	}
@media only screen and (max-width: 768px)  {
	#ch .spview {
		display: block;
	}	
	#ch .pcview {
		display: none;
	}	
}
#ch .anim {
	opacity: 0;
	transition: 1.5s all 0s;
}
#ch .anim.ac {
	opacity: 1;
	 transform: translate(0);
}