@charset "utf-8";

/* ------------------------------------------------------------------------------------------
*   RESET
------------------------------------------------------------------------------------------ */
html {
  color: #000;
  background: #FFF
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
fieldset, img {
  border: 0
}
ol, ul {
  list-style: none
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal
}
q:before, q:after {
  content: ''
}
abbr, acronym {
  border: 0;
  font-variant: normal
}
sup {
  vertical-align: text-top
}
sub {
  vertical-align: text-bottom
}
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  *font-size: 100%
}
legend {
  color: #000
}
::selection {
  background: #fff
}
html, body {
  position: relative;
  min-width: 960px;
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', '游ゴシック', YuGothic, 'メイリオ', Meiryo, sans-serif;
  font-size: 10px;
  font-weight: 300;
  line-height: 1;
  font-variant-ligatures: none;
  font-feature-settings: 'palt';
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
}
a {
  text-decoration: inherit;
  color: inherit
}
img, svg, video, iframe, picture {
  display: block;
}


/* ------------------------------------------------------------------------------------------
*   BASE
------------------------------------------------------------------------------------------ */
.wrapper {
	min-width: 1200px;
	margin: 0 auto;
  overflow: hidden;
}
.header {
  padding: 50px 0 40px 0;
}
.top_header {
  margin: 0 auto;
	width: 413px;
}
/*
.header {
  z-index: 200;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  background-color: #fff;
}
*/
.pc-view {
	display: block;
}
.sp-view {
	display: none;
}

.staff{
	max-width: 735px;
	margin: -60px auto 100px;
	font-size: 12px;
	line-height: 200%;
}
.art__btn {
	margin: 0 auto 100px;
}
.art__btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30%;
	height: 50px;
	margin: 0 auto 30px;
	color: #666;
	font-size: 14px;
	border: 1px solid #666;
}


/* ------------------------------------------------------------------------------------------
*   footer
------------------------------------------------------------------------------------------ */
.footer-lb-banner {
  border-top: 1px solid #C9C9C9;
  text-align: center;
}
.footer-lb-banner a {
  display: block;
  width: 100%;
  padding: 25px 0;
}

.footer-lb-banner  img{
text-align: center;
margin:0 auto;
}

/*  footer-inner
--------------------------------------------- */
.footer-inner {
  background-color: #ECECEC;
}

/*  footer-heading
--------------------------------------------- */
.footer-heading {
  display: flex;
  align-items: center;
  padding-top: 55px;
  padding-bottom: 60px;
}

/*  footer-block
--------------------------------------------- */
.footer-block {
  position: relative;
  width: 50%;
  padding: 35px 0 25px 0;
  box-sizing: border-box;
}
.footer-block:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  display: block;
  width: 1px;
  height: 195px;
  background-color: #C9C9C9;
  z-index: 1;
  transform: translateY(-50%);
}
.footer-block:last-child:before {
  display: none;
}
.footer-block--left {
  padding-right: 60px;
  padding-left: 80px;
}
.footer-block--right {
  padding-left: 80px;
}
.footer-group {
  margin-bottom: 50px;
  padding: 35px 0 40px;
  background-color: #ECECEC;
  border-top: 1px solid #ddd;
}
.footer-group .container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-group__title {
  font-size: 1.0714285714rem;
  font-weight: bold;
  margin-right: 30px;
}
.footer-group__list {
  display: flex;
  align-content: center;
  justify-content: center;
  font-size: 0.8571428571rem;
}
.footer-group__list-item {
  display: inline-block;
  position: relative;
  margin-right: 15px;
  padding-right: 15px;
}
.footer-group__list-item:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  display: block;
  width: 1px;
  height: 12px;
  background-color: #4D4D4D;
  z-index: 1;
  transform: translateY(-50%);
}
.footer-group__list-item:last-child:before {
  display: none;
}

/*  sns-area
--------------------------------------------- */
.sns-area {
  display: flex;
  align-items: center;
}
.sns-area__title {
  width: 160px;
  font-size: 1.0714285714rem;
}
.sns-area__list {
  display: flex;
  align-items: center;
  width: calc(100% - 160px);
}
li.sns-area__list-item {
  width: 50px;
}
li.sns-area__list-item  img{
 width: 50px;
}
.sns-area__list-item:nth-of-type(n + 2) {
  margin-left: 22px;
}
.sns-area__link {
  display: block;
}

/*  mail-area
--------------------------------------------- */
.mail-area {
  display: flex;
  align-items: center;
}
.mail-area__title {
  width: 160px;
  font-size: 1.0714285714rem;
}
.mail-area__content {
  display: flex;
  align-items: center;
  width: calc(100% - 160px);
}
.mail-area__image {
  width: 43px;
}
.mail-area__link {
  display: block;
}
.mail-area__text {
  width: calc(100% - 43px);
  font-size: 0.6785714286rem;
  margin-left: 18px;
}

/*  help-area
--------------------------------------------- */
.help-area__title {
  font-size: 2rem;
}
.help-area__text {
  margin-left: 27px;
}
.help-area__list {
  display: flex;
  align-items: center;
}
.help-area__list-item {
  position: relative;
  margin-right: 20px;
  padding-right: 20px;
}
.help-area__list-item:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  display: block;
  width: 1px;
  height: 12px;
  background-color: #4D4D4D;
  z-index: 1;
  transform: translateY(-50%);
}
.help-area__list-item:last-child:before {
  display: none;
}
.help-area__link {
  font-size: 1.0714285714rem;
}
.help-area__link:hover {
  text-decoration: underline;
}

/* -- help-area-heading -- */
.help-area-heading {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

/*  footer-nav
--------------------------------------------- */
.footer-nav {
  margin-bottom: 55px;
}
.footer-nav__list {
  display: flex;
  align-content: center;
  justify-content: center;
}
.footer-nav__list-item {
  position: relative;
  margin-right: 20px;
  padding-right: 20px;
}
.footer-nav__list-item:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  display: block;
  width: 1px;
  height: 12px;
  background-color: #4D4D4D;
  z-index: 1;
  transform: translateY(-50%);
}
.footer-nav__list-item:last-child:before {
  display: none;
}
.footer-nav__link {
  font-size: 0.8571428571rem;
}
.footer-nav__link:hover {
  text-decoration: underline;
}

/*  footer-logo
--------------------------------------------- */
.footer-logo {
  display: block;
  overflow: hidden;
  padding-top: 20px;
  width: 219px;
  height: 0;
  background: url(https://www.junonline.jp/common/pc/img/title_yac.png) 0 0 no-repeat;
  background-size: 100% auto;
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: auto;
}

/*  footer-copyright
--------------------------------------------- */
.footer-copyright {
  padding-bottom: 50px;
  padding-top: 20px;
  text-align: center;
}
.footer-copyright__text {
  color: #000;
  font-size: 0.8571428571rem;
}


/* ------------------------------------------------------------------------------------------
*   page , visual , contents
------------------------------------------------------------------------------------------ */
.page * {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', '游ゴシック', YuGothic, 'メイリオ', Meiryo, sans-serif;
	box-sizing: border-box;
}

/*  visual
--------------------------------------------- */
.visual {
	width: 1200px;
  margin: 10px auto 320px;
	text-align: center;
}
.visual__img {
	margin: 0 auto 100px;
}
.visual__lead {
	margin-bottom: 50px;
	font-size: 60px;
	font-weight: bold;
	line-height: 1.58;
	letter-spacing: 5px;
}
.visual__text {
	font-size: 38px;
	line-height: 2.23;
}

/*  contents
--------------------------------------------- */
.contents {
	position: relative;
}

/*  section
--------------------------------------------- */
.section {
	width: 1000px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 180px;
}

.section__title {
	margin-bottom: 100px;
	font-size: 55px;
	font-weight: bold;
	line-height: 1.45;
	transition: opacity 1.0s ease;
	opacity: 0;
}
.section__title.show {
	opacity: 1;
}
.section__title span {
	display: inline-block;
}
@keyframes bound1 {
  0% {opacity: 0; transform: translate(0,-80px);}
  50% {transform: translate(0,10px);}
  70% {opacity: 1; transform: translate(0,-5px);}
  100% {transform: translate(0,0);}
}
.section__title.show .bound1-1 {animation: bound1 .6s ease-in-out;}
.section__title.show .bound1-3 {animation: bound1 .8s ease-in-out;}
.section__title.show .bound1-2 {animation: bound1 1.0s ease-in-out;}
.section__title.show .bound1-4 {animation: bound1 1.2s ease-in-out;}

.section__img {
	margin-bottom: 85px;
}
.section__text {
	margin:  -65px -100px 60px;
	font-size: 35px;
	font-weight: bold;
	line-height: 1.65;
}

.section__slide__wrap {
	background: #bac3c1;
	margin-bottom: 85px;
	padding: 60px 39px 35px;
	text-align: center;
	border-radius: 30px;
	position: relative;
}
.section__slide__caption {
	height: 228px;
	padding: 30px 40px 0;
}
.section__slide__caption p {
	font-size: 28px;
	line-height: 1.42;
	text-align: left;
}

.swiper-slide {
	background: #bac3c1;
}
.swiper-slide img {
	margin: 0 auto;
	text-align: center;
}
.swiper-button-prev,
.swiper-button-next {
	background: #bac3c1;
	width: 75px;
	height: 110px;
	margin-top: -55px;
	position: absolute;
	top: 50%;
	z-index: 100;
}
.swiper-button-prev {
	left: 0;
}
.swiper-button-next {
	right: 0;
}
.swiper-button-prev:after,
.swiper-button-next:after {
	content: '';
	width: 24px;
	height: 32px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.swiper-button-prev:after {
	background: url("../img/arrow_prev.png") no-repeat 0 0;
}
.swiper-button-next:after {
	background: url("../img/arrow_next.png") no-repeat 0 0;
}
.swiper-button-disabled {
	display: none;
}
.swiper-button-prev.active,
.swiper-button-next.active {
	z-index: 101;
}

.section__links {
	padding: 65px 40px;
}
.section__links li {
	font-size: 18px;
	line-height: 2.05;
}
.section__links li a {
	text-decoration: underline;
}
.section__links li a:hover {
	opacity: 0.5;
}

/*  section color
--------------------------------------------- */
.n01 .section__title { color: #7b679b; }
.n01 .section__links { background: #ede1ff; }
.n02 .section__title { color: #716551; }
.n02 .section__links { background: #f2e0c2; }
.n03 .section__title { color: #68796a; }
.n03 .section__links { background: #d2efd5; }
.n04 .section__title { color: #1c1c12; }
.n04 .section__links { background: #d0d0d0; }
.n05 .section__title { color: #7b679b; }
.n05 .section__links { background: #ede1ff; }
.n06 .section__title { color: #716551; }
.n06 .section__links { background: #f2e0c2; }
.n07 .section__title { color: #131c2a; }
.n07 .section__links { background: #caddfb; }
.n08 .section__title { color: #1c1c12; }
.n08 .section__links { background: #d0d0d0; }
.n09 .section__title { color: #ffc772; }
.n09 .section__links { background: #fff4e3; }
.n10 .section__title { color: #521e29; }
.n10 .section__links { background: #ffe1e7; }
.n11 .section__title { color: #131c2a; }
.n11 .section__links { background: #caddfb; }


/*-----------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------*/


@media screen and (max-width:767px) {
	
	
	/* ------------------------------------------------------------------------------------------
	*   RESET
	------------------------------------------------------------------------------------------ */
	html, body {
    position: relative;
    min-width: 320px
  }
  img {
    max-width: 100%;
    height: auto;
  }


	/* ------------------------------------------------------------------------------------------
	*   BASE
	------------------------------------------------------------------------------------------ */
	.wrapper {
		min-width: 100%;
	}
	.header {
		padding: 30px 0 0;
  }
  .top_header {
    margin: 0 auto;
    width: 50%;
  }
  .top_header img {
    width: 100%;
  }
	.pc-view {
		display: none;
	}
	.sp-view {
		display: block;
	}
	
	.staff {
		width: 50%;
		margin: -50px auto 50px;
		font-size: 10px;
		line-height: 200%;
	}
	.staff br {
		display: none !important;
	}
	.art__btn {
		margin: 0 auto 50px;
	}
	.art__btn a {
		display: flex;
		width: 60%;
		border: 1px solid #666;
		align-items: center;
		justify-content: center;
		height: 50px;
		color: #666;
		font-size: 12px;
		margin: 0 auto 20px;
	}
	
	
	/* ------------------------------------------------------------------------------------------
	*   footer
	------------------------------------------------------------------------------------------ */ 
  .footer-lb-banner{display:none}
  .footer-group{display:none}
  .footer-block--right{display:none}
  .footer-block--left {
   padding-right: 0px; 
    padding-left:0px; 
	}
  .footer-block {
    position: relative;
    width: 100%;
    padding: 0px 0 0px 0;
    box-sizing: border-box;
	}
	.footer-block:before {
		display: none;
	}
  .footer-heading {
    padding-top: 15px;
    padding-bottom: 25px;
	}
	.sns-area {
    display: block;
    align-items: center;
	}
  .sns-area__title {
    text-align: center;
    font-size: 4.8vw;
    margin-bottom: 0px;
    margin: 20px auto;
	}
  .sns-area__list {
    display: flex;
    justify-content: center;
    margin: 0 auto;
	} 
  .footer-nav__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 2.6666666667vw;
	}
	.footer-nav__list  li{
  	margin:20px 5px 0px 5px;
  }


	/* ------------------------------------------------------------------------------------------
	*   page , visual , contents
	------------------------------------------------------------------------------------------ */	

	/*  visual
	--------------------------------------------- */
	.visual {
		width: 100%;
	}
	.visual__img {
	}
	.visual img {
		max-width: 100%;
		height: auto;
	}

	/*  visual
	--------------------------------------------- */
	.visual {
		width: 100%;
		margin: 30px auto 100px;
	}
	.visual__img {
		margin: 0 auto 35px;
	}
	.visual__lead {
		margin-bottom: 20px;
		font-size: 20px;
		letter-spacing: 3px;
	}
	.visual__text {
		font-size: 14px;
	}

	/*  contents
	--------------------------------------------- */
	.contents {
		padding: 0 15px;
	}

	/*  section
	--------------------------------------------- */
	.section {
		width: 100%;
		margin-bottom: 90px;
	}

	.section__title {
		margin-bottom: 35px;
		font-size: 20px;
	}

	.section__img {
		margin-bottom: 40px;
	}
	.section__text {
		margin:  -25px 0 30px;
		font-size: 14px;
	}

	.section__slide__wrap {
		margin-bottom: 40px;
		padding: 20px 10px 15px;
		border-radius: 15px;
	}
	.section__slide__caption {
		height: 80px;
		padding: 5px 5px 0;
	}
	.section__slide__caption p {
		font-size: 11px;
	}

	.swiper-button-prev,
	.swiper-button-next {
		width: 35px;
		height: 60px;
		margin-top: -30px;
		outline: none;
	}
	.swiper-button-prev:after,
	.swiper-button-next:after {
		width: 12px;
		height: 16px;
	}
	.swiper-button-prev:after {
		background: url("../img/arrow_prev.png") no-repeat 0 0;
		background-size: 12px 16px;
	}
	.swiper-button-next:after {
		background: url("../img/arrow_next.png") no-repeat 0 0;
		background-size: 12px 16px;
	}

	.section__links {
		padding: 20px 20px;
	}
	.section__links li {
		font-size: 12px;
	}
	.section__links li a:hover {
		opacity: 1;
	}
	

	
  
} /* @media screen and (max-width:767px) */