﻿@charset "UTF-8";
/*========================
kv
==========================*/
#kv {
  margin-bottom: 40px;
}

/*========================
#block01
==========================*/
#block01 {
  margin-bottom: 40px;
}

#block01 p {
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
}

#block01 p span {
  color: #e8392a;
}

#block01 p a {
  color: #00b2d8;
  text-decoration: underline;
}

#block01 .img {
  margin-bottom: 20px;
}

/*========================
#block02,#block03
==========================*/
#block02,
#block03 {
  margin-bottom: 60px;
  text-align: center;
}

#block02 .ttl,
#block03 .ttl{
  position: relative;
  display: inline-block;
  text-align: center;
  font-size: 28px;
  margin-bottom: 50px;
  padding-left: 90px;
}

#block02 .ttl span,
#block03 .ttl span{
  color: #e8392a;
}

#block02 .ttl::before,
#block03 .ttl::before{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: inline-block;
  content: "";
  width: 78px;
  height: 96px;
  background: url("/images/kanagi/2019/ttl_icon.png") no-repeat center/cover;
}

#block02 .img {
  margin-bottom: 20px;
}

#block02 p {
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
}

#block02 p:first-of-type {
  margin-bottom: 20px;
}

/*block03*/
#block03 .subttl {
  text-align: center;
  font-size: 22px;
  background-color: #00b2d8;
  color: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

#block03 .inner {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -ms-align-items: center;
  margin-bottom: 60px;
}

#block03 .inner .img {
  margin: 0;
}

#block03 .inner .note {
  text-align: left;
  font-size: 16px;
  margin-left: 20px;
  line-height: 1.8;
}

#block03 .inner .note p {
	margin-bottom: 23px;
}

#block03 .inner .note a {
  color: #00b2d8;
  text-decoration: underline;
}

#block03 .inner-sub {
	margin-bottom: 60px;
}

#block03 .inner-sub .img {
	margin-bottom: 30px;
}

#block03 .inner-sub p {
	font-size: 16px;
	text-align: left;
	line-height: 1.8;
}

#block03 .inner-sub p a {
	color: #00b2d8;
	text-decoration: underline;
}

#block03 .lead {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

#block03 .lead span {
  font-size: 44px;
  font-weight: bold;
  color: #eb5446;
}

#block03 .txt {
  text-align: center;
  font-size: 16px;
  margin-bottom: 35px;
}

#block03 .safety_img01 {
  margin-bottom: 22px;
}

#block03 .safety_img02 {
  margin-bottom: 27px;
}

#block03 .caution {
  font-size: 16px;
  line-height: 1.8;
  padding-left: 51px;
  text-indent: -51px;
  text-align: left;
}

#block03 .caution::before {
  display: inline-block;
  content: "";
  width: 35px;
  height: 29px;
  background: url(/age/safety/img/safety_icon.png) no-repeat center/35px;
  margin: 0px 12px -5px 0;
}

#block03 .caution span {
  font-size: 26px;
  font-weight: bold;
  color: #eb5446;
}

#block03 .caution_note {
  text-align: center;
  font-size: 16px;
  margin-top: 35px;
  margin-bottom: 35px;
}

#block03 .safety_books {
  margin: 50px 0 60px;
  border: solid 1px #d1e1e7;
}

#block03 .safety_books dt {
  font-size: 22px;
  color: #00b2d8;
  text-align: center;
  background-color: #ecfcfe;
  padding: 14px 0;
}

#block03 .safety_books dd {
    padding: 30px;
}

#block03 .safety_books dd ul {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#block03 .safety_books dd ul li {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
}

#block03 .safety_books dd ul li:not(:last-child) {
  margin-bottom: 20px;
}

#block03 .safety_books dd ul li img {
  margin-right: 16px;
}

#block03 .safety_books dd ul li p {
  font-size: 20px;
  line-height: 1.6;
  text-align: left;
}

#block03 .safety_books dd ul li p span {
  font-size: 14px;
}

/*========================
#blue
==========================*/
#blue {
  position: relative;
  background-color: #00b2d8;
  padding: 40px 30px;
  overflow: hidden;
  margin-bottom: 50px;
}

#blue::before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 40px 0 40px;
  border-color: #ffffff transparent transparent transparent;
}

#blue .ttl {
  text-align: center;
  margin-bottom: 30px;
}

#blue .lead {
  font-size: 18px;
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}

#blue .lead span {
  font-size: 28px;
  font-weight: bold;
  color: #fafd15;
}

#blue .note {
  color: #fff;
  font-size: 16px;
  text-align: left;
  line-height: 1.6;
  margin-bottom: 35px;
}

#blue .conc--l {
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 30px;
}

#blue .conc--l span {
  color: #fafd15;
}

#blue .conc--s {
  font-size: 16px;
  color: #fff;
  text-align: center;
}

#blue .conc span {
  color: #fafd15;
}

#blue .movie {
  width: 100%;
  margin: 0 auto;
  max-width: 640px;
  position: relative;
  height: auto;
  padding-top: calc(318/580*100%);
}

#blue .movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#blue .movie_wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

#blue .chara {
  position: absolute;
  bottom: -11px;
  right: 12px;
}

/*========================
#block04
==========================*/
#block04 {
  margin-bottom: 80px;
}

#block04 .ttl {
  text-align: center;
  font-size: 28px;
  line-height: 1.6;
  margin-bottom: 30px;
}

#block04 .ttl .blue {
  color: #00b2d8;
}

#block04 .ttl .space {
  display: inline-block;
  margin: 0 -10px;
}

#block04 .contents {
  margin-bottom: 40px;
}

#block04 .contents .head {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  margin-bottom: 20px;
}

#block04 .contents .img {
  margin-right: 20px;
}

#block04 .contents .subttl {
  font-size: 26px;
  color: #00b2d8;
}

#block04 .contents p {
  font-size: 16px;
  line-height: 1.6;
}

/*========================
#block05
==========================*/
#block05 {
  position: relative;
  margin-bottom: 80px;
}

#block05 .icon01,
#block05 .icon02 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

#block05 .icon01 {
  margin: -19px 0 0 -198px;
}

#block05 .icon02 {
  margin: -9px 0 0 252px;
}

#block05 .contents {
  margin-bottom: 40px;
}

#block05 .contents .ttl {
  text-align: center;
  font-size: 26px;
  margin-bottom: 20px;
}

#block05 .contents .ttl::before {
  display: inline-block;
  content: "";
  width: 18px;
  height: 24px;
  background: url("/images/common/2018/ttl_icon01.png") no-repeat center/cover;
  margin: 0 8px -2px 0;
}

#block05 .contents .inner {
  text-align: center;
}

/*========================
#block06
==========================*/
#block06 {
  background: #48d4f6 url("/images/kanagi/2019/block06_bg.png") no-repeat center bottom;
  margin-bottom: 80px;
  padding: 50px 0 280px 0;
}

#block06 .ttl {
  position: relative;
  text-align: center;
  font-size: 32px;
  margin-bottom: 20px;
  color: #fff;
}

#block06 .ttl span {
  text-align: center;
  color: #fafd15;
  font-size: 42px;
}

#block06 .ttl small {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #fafd15;
  font-size: 12px;
  margin: -13px 0 0 13px;
}

#block06 .lead {
  text-align: center;
  font-size: 16px;
  margin-bottom: 30px;
  color: #fff;
}

#block06 .voice {
  position: relative;
  padding: 25px;
  border-radius: 6px;
  width: 536px;
  margin: 0 auto 40px;
}

#block06 .voice::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: inline-block;
  content: "";
  border: 1px solid #000;
  width: 30px;
  height: 30px;
  border-top: none;
  border-left: none;
  transform: translateX(-50%) rotate(45deg) skew(20deg, 20deg);
  border-width: 2px;
}

#block06 .blue {
  background-color: #00b2d8;
  color: #fff;
}

#block06 .blue::after {
  background-color: #00b2d8;
  border-color: #00b2d8;
  margin: 0 0 -16px 0;
}

#block06 .white {
  border: solid 2px #00b2d8;
  color: #00b2d8;
  background-color: #fff;
}

#block06 .white::after {
  background-color: #fff;
  border-color: #00b2d8;
  margin: 0 0 -18px 0;
}

#block06 .voice .subttl {
  font-size: 18px;
  margin-bottom: 10px;
}

#block06 .voice p {
  font-size: 16px;
  line-height: 1.6;
}

/*========================
#block07
==========================*/
#block07 {
  margin-bottom: 50px;
  background-color: #e6fbfe;
  padding: 40px;
}

#block07 .ttl {
  text-align: center;
  margin-bottom: 20px;
}

#block07 .lead {
  position: relative;
  text-align: center;
  font-size: 20px;
  margin-bottom: 30px;
}

#block07 .lead::before,
#block07 .lead::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  content: "";
  width: 10px;
  height: 1px;
  background-color: #000;
}

#block07 .lead::before {
  margin: 0 0 0 -144px;
}

#block07 .lead::after {
  margin: 0 0 0 144px;
}

#block07 .contents:not(:last-of-type) {
  margin-bottom: 40px;
}

#block07 .contents .img {
  margin-bottom: 20px;
}

#block07 .contents .subttl {
  font-size: 20px;
  margin-bottom: 20px;
}

#block07 .contents p {
  font-size: 16px;
  line-height: 1.6;
}


/*========================
#tableimg
==========================*/
.tableimg {
	margin-bottom: 50px;
}

/*========================
adjust
==========================*/
.slick-dots {
  position: static;
  padding: 1rem 0;
}

.slick-dots li button:before {
  content: "";
  opacity: 1;
  background-color: #fff;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  border: solid 2px transparent;
}

.slick-dots .slick-active button:before {
  background-color: #00b2d8;
  border: solid 3px #fafd15;
}

.slick-prev,
.slick-next {
  display: inline-block;
  width: 74px;
  height: 71px;
}

.slick-prev::before ,
.slick-next::before {
  display: block;
  width: 74px;
  height: 71px;
  content: "";
  opacity: 1;
}

.slick-prev {
  left: -9rem;
}

.slick-prev::before {
  /*background: url(#{$image-path}common/slide_prev.png) no-repeat center/cover;*/
}

.slick-next {
  right: -9rem;
}

.slick-next::before {
  /*background: url(#{$image-path}common/slide_next.png) no-repeat center/cover;*/
}

figure {
  margin: 0;
  text-align: center;
}

.u-mB40 {
  margin-bottom: 40px;
}

.u-mB10 {
  margin-bottom: 10px;
}

.u-taR {
  text-align: right;
}

