@charset "utf-8";
/* CSS Document */
/* -----------------------------------------------------------------------
 Defaults Style
------------------------------------------------------------------------*/
html {
font-size:90%;
		}
	@media screen and (min-width:768px){
		html{font-size:100%;
		}}
ul, dl, ol {
  list-style-type: none;
}

body {
  margin: 0;
  padding: 0;
  color: #1a1a1a;
  font-family: Arial, Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, "MS PGothic", sans-serif;
  line-height: 1.6;
  /*font-size: 15px;*/
  text-align: center;
  position: relative;
  word-break: break-all;
  font-weight: 500;}


/* -----------------------------------------------------------------------
 Clearfix
------------------------------------------------------------------------*/
.clearfix::after {
   content: "";
   display: block;
   clear: both;
}

/* -----------------------------------------------------------------------
 Link Style
------------------------------------------------------------------------*/
a:link {
  color: #000;
  text-decoration: none;
}
a:visited {
  color: #000;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
 opacity: 0.5;
	transition: 0.3s;
}
a:active {
  color: #000;
  text-decoration: none;
}
*:focus {
  outline: none;
}
/*スマホタップ時に色変化*/
a{
  -webkit-tap-highlight-color: rgba(255, 215, 0, 0.4);
}

/* -----------------------------------------------------------------------
 flexbox
------------------------------------------------------------------------*/
.f-container{
	display:flex;	
}

/* -----------------------------------------------------------------------
 Responsive(画像の切り替え)
------------------------------------------------------------------------*/
.spOnly {
  display: block; }
  @media screen and (min-width: 768px) {
    .spOnly {
      display: none; } }

.pcOnly {
  display: none; }
  @media screen and (min-width: 768px) {
    .pcOnly {
      display: block; } }

article {
  position: relative; }

/* -----------------------------------------------------------------------
 マージン
------------------------------------------------------------------------*/
.mt1 {
  margin-top: 1px;
}
.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}
.mt40 {
  margin-top: 40px;
}
.mt50 {
  margin-top: 50px;
}
.mt60 {
  margin-top: 60px;
}
.mt70 {
  margin-top: 70px;
}
.mt80 {
  margin-top: 80px;
}
.mt90 {
  margin-top: 90px;
}
.mt100 {
  margin-top: 100px;
}
.m0a {
  margin: 0 auto;
}
.m0a{
	margin:0 auto;}

/* -----------------------------------------------------------------------
 Common
------------------------------------------------------------------------*/
main{
	width:100%;}

/* -----------------------------------------------------------------------
 メインビジュアル
------------------------------------------------------------------------*/
.mvArea {
	margin:0 auto;
	width:100%;
}

.mvArea .mv-img img{
	width:100%;  
	vertical-align:top;
}


/* -----------------------------------------------------------------------
 コンテンツ
------------------------------------------------------------------------*/
.contents {
  margin: 0 auto;
}

.contents img{
	width: 100%;
	vertical-align:top;
}

@media screen and (min-width: 768px) {
	.contents {
  max-width: 690px;
  margin: 0 auto;
	}}

.contents_inner{
	padding:0 10px;	
} 


/* -----------------------------------------------------------------------
googleフォーム
------------------------------------------------------------------------*/
.frame-wrapper_gf{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 50%;
  margin-left:auto;
  margin-right:auto;
}

.frame-wrapper_gf iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/*.full {
    padding: 0;
    margin: 0;
    clear: both
}
img.full {width:100%; height:auto;}*/

.reg_ttl01{
	font-size:24px;
	font-weight: bold;
	line-height:40px;
}
.reg_ttl01 img{
	vertical-align: middle;
	height:40px;
}

@media screen and (min-width: 420px) {
    .reg_ttl01{
	font-size:26px;
	}}
@media screen and (min-width: 768px) {
    .reg_ttl01{
	font-size:36px;	
	line-height:54px;
	}
	.reg_ttl01 img{
	vertical-align: middle;
	height:54px;
}
}

.reg_ttl02{
	font-size:18px;
	font-weight: bold;
}

@media screen and (min-width: 420px) {
    .reg_ttl02{
	font-size:20px;
	}}
@media screen and (min-width: 768px) {
    .reg_ttl02{
	font-size:24px;	
	}
}

.registration {
	padding:10px 0 15px;
background-color: #DDD;
 background-image: repeating-linear-gradient(-45deg, transparent, transparent 19px, rgba(255,255,255,.3) 1px, rgba(255,255,255,.3) 20px), repeating-linear-gradient(45deg, transparent, transparent 19px, rgba(255,255,255,.3) 1px, rgba(255,255,255,.3) 20px);
}

.registration .annotation{
	margin: -5px 0 10px;
}

/**本番タイトルここから**/
.reg_ttl04{
	font-size:20px;
	font-weight: bold;
	line-height:30px;
}
.reg_ttl04 img{
	vertical-align: middle;
	height:30px;
}

@media screen and (min-width: 420px) {
    .reg_ttl04{
	font-size:22px;
	}}
@media screen and (min-width: 768px) {
    .reg_ttl04{
	font-size:30px;	
	line-height:48px;
	}
	.reg_ttl04 img{
	vertical-align: middle;
	height:48px;
}
}

.reg_ttl03{
	font-size:16px;
	font-weight: bold;
}
.reg_ttl03 span{
	font-size:x-large;
	color: red;
font-weight: bold;}

@media screen and (min-width: 420px) {
    .reg_ttl03{
	font-size:18px;
	}}
@media screen and (min-width: 768px) {
    .reg_ttl03{
	font-size:22px;	
	}
}

.btn_cubic,
a.btn_cubic,
button.btn_cubic {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 1.5rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

@media screen and (min-width: 420px) {
.btn_cubic,
a.btn_cubic,
	button.btn_cubic {
	  font-size: 1.6rem;
	  padding: 1rem 3rem;
	}}

a.btn_mkak{
  color: #000;
  background-color: #fff100;
  border-bottom: 5px solid #ccc100;
}
a.btn_mkak:hover {
  margin-top: 3px;
  color: #000;
  background: #fff20a;
  border-bottom: 2px solid #ccc100;
}
a.btn_mkak{
  color: #fff;
  background-color: #00ccc6;
  border-bottom: 5px solid #349996;
}
a.btn_mkak:hover {
  margin-top: 3px;
  color: #fff;
  background: #50e2d4;
  border-bottom: 2px solid #349996;
}
/**本番タイトルここまで**/


/*テスト*/
.m2 .freebirdFormviewerViewHeaderTitle {
font-size:20px;}
@media screen and (min-width: 768px) {
.m2 .freebirdFormviewerViewHeaderTitle {
font-size:30px;}}
/*テストここまで*/

/* -----------------------------------------------------------------------
 Footer SNS
------------------------------------------------------------------------*/

footer {
  background-color:dimgray;
}
footer p{
	color: white;
}
.footer_inner{
	padding:40px 0 40px;
	}
@media screen and (min-width: 768px) {.footer_inner{
	padding:40px 0 40px;
	}}

.sns{
	dispray:flex;
	padding-bottom:5px;
}
.sns_inner{margin:0 auto;}
.sns_inner a{padding:0 10px;
}
.sns_inner img{	width:45px;}

/* -----------------------------------------------------------------------
 topへ戻る
------------------------------------------------------------------------*/
#pageTop_btn{
	  z-index: 2;
  width: 80px;
  height: 80px;
  position: fixed;
  left: 10px;
  bottom: 10px;
  background: #7acca5;
  opacity: 0.8;
  border-radius: 50%;
}
#pageTop_btn a{
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  text-align: center;
  bottom: -35px;
color: #fff;
font-size:18px;
letter-spacing:0.1em;
}
#pageTop_btn a::before{
  font-family: "Font Awesome 5 Free";
  content: '\f106';
  font-weight: 900;
  font-size: 30px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 10px;
  bottom: 130px;
  right: 0;
  left: 0;
  margin: auto;
}

/* -----------------------------------------------------------------------
 テーブル
------------------------------------------------------------------------*/
.spec_inner{
	margin:0 auto;
}

.tstyle_spec tbody{
	
}
.tstyle_spec,.specTxt {
  border-collapse: collapse;
 width: 90%;
	 margin: 0 auto;
	 padding: 0 10px;
}
@media screen and (min-width: 375px) {
	.tstyle_spec,.specTxt {
		width: 80%;}
}
@media screen and (min-width: 768px) {
	.tstyle_spec,.specTxt {
 width: 70%;
	}}
.tstyle_spec th {
  width: 40%;
  padding: 5px 15px;
  border: 1px solid #e8e8e8;
  text-align: left;
  background-color: #f7f7f7;
font-weight: normal;
		font-size:90%;
}
.tstyle_spec td {
  width: 60%;
  padding: 5px 15px;
  border: 1px solid #e8e8e8;
	background-color: #fff;
	text-align: left;
}
.specTxt{
	padding:  10px;}
.specTxt p{
	font-size:14px;
text-align: left;
}

/* -----------------------------------------------------------------------
 セクション01
------------------------------------------------------------------------*/
.sec01 p{
	font-size:14px;
	text-align: left;
}
.sec01 img{
vertical-align:top;}


@media screen and (min-width: 420px) {
.sec01 p{
	font-size:16px;
	text-align: left;
}
}

/* -----------------------------------------------------------------------
 セクション03
------------------------------------------------------------------------*/
.sec02 img{
	width:100%;
vertical-align:top;
}

.sec03{
	background-color:#dcdcdc;
	text-align:center;
}
.sec03 img{
	width:80%;
	padding-bottom:20px;
	vertical-align:top;
}

.sec03 p{
	width:100%;
	font-size:16px;
padding:10px 0;

}
@media screen and (min-width: 375px) {
    .sec03 p{
	font-size:18px;
				padding:15px 0;
}
.sec03 img{
	padding-bottom:30px;
}}
@media screen and (min-width: 768px) {
    .sec03 p{
	font-size:24px;
		padding:20px 0;
}
.sec03 img{
	padding-bottom:40px;
}}

/*.sec04{background-color:#dcdcdc;}*/
.sec04 p{
	font-size:13px;
}
@media screen and (min-width: 375px) {
.sec04 p{
	font-size:14px;
	}}
@media screen and (min-width: 420px) {
.sec04 p{
	font-size:16px;
	}}
.sec04 p span{
	font-size:smaller;
	vertical-align: middle;
color:#f7dc8d;}

/* -----------------------------------------------------------------------
 セクション05
------------------------------------------------------------------------*/
.sec05_inner{
	padding:20px 0;
	border: 5px solid #f0d8c2;
}
.sec05_inner ul p{
text-align: left;
	padding-top:2px;
}
.sec05_inner ul{
	width:80%;
	margin:0 auto;
}
@media screen and (min-width: 375px) {
.sec05_inner{
	border: 6px solid #f0d8c2;
	}}
@media screen and (min-width: 375px) {
.sec05_inner ul{
	width:65%;
}}


/*pcOnly*/
.sec05_inner .f-container{
	margin:0 auto;
}
.sec05fL img{
	width:100%;
}
.sec05fL{
	width:52%;
	margin:0 1% 0 7%;
	text-align: center;
}
.sec05fR{
	width:32%;
	margin:0 7% 0 1%;
 padding-top:10px;
	text-align: left;
	font-size:16px;
}
@media screen and (min-width: 375px) {
.sec05_inner{
	padding:30px 0;
	border: 10px solid #f0d8c2;
	}}

.sec05bfL img{
	width:100%;
}
.sec05bfL{
	width:42%;
	margin:0 1% 0 7%;
	text-align: center;
}
.sec05bfR{
	width:42%;
	margin:0 7% 0 1%;
 padding-top:10px;
	text-align: left;
	font-size:16px;
}
/* -----------------------------------------------------------------------
 見出しデザイン
------------------------------------------------------------------------*/
.ttl01 {
	  width: 100%;
  color: #FFF;
  background-color: #333;
  padding: 7px 0;
  text-align: center;
  font-size: 18px;
  /*font-weight: bold;*/
  margin:0 0 15px 0;
	letter-spacing: 0.05em;
}

@media screen and (min-width: 420px) {
    .ttl01{
	font-size:22px;
}}
@media screen and (min-width: 768px) {
    .ttl01{
	font-size:26px;
}}

.annotation{
	font-size: 12px !important;
padding-top: 3px;}


.ttl02 {
  font-weight: bold;
  font-size: 18px;
  color: #333;
  padding-bottom: 5px;
}
@media screen and (min-width: 375px) {
    .ttl02{
	font-size:21px;
}}
@media screen and (min-width: 768px) {
    .ttl02{
	font-size:26px;
}}
@media screen and (min-width: 960px) {
    .ttl02{
	font-size:24px;
}}

.ttl05 {
	  width: 70%;
padding-bottom: 3px;
	border-bottom: solid 3px #ed587a;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
margin: 0 auto 20px;
}
@media screen and (min-width: 420px) {
    .ttl05{
		width: 50%;
		font-size: 20px;
}}
@media screen and (min-width: 768px) {
    .ttl05{
		width: 50%;
	font-size:24px;
}}

.ttl03 {
	  width: 30%;
padding-bottom: 5px;
	border-bottom: solid 3px #ed587a;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
margin: 0 auto 20px;
}
@media screen and (min-width: 375px) {
    .ttl03{width: 24%;
	font-size:20px;
}}
@media screen and (min-width: 768px) {
    .ttl03{
		width: 15%;
	font-size:24px;
}}

.ttl04 h3{
font-size:24px;
	font-weight:400;
	font-family: 'Libre Baskerville', "Times New Roman","serif";
	margin-bottom:-10px;}
.ttl04 h3 span{
	letter-spacing:-.3em;
	width:2em;
	margin-right:.6em;
}
.ttl04 p{
		font-size:6px;
		letter-spacing:.2em;
}
@media screen and (min-width: 375px) {
    .ttl04 h3{
	font-size:28px;
}
    .ttl04 p{
	font-size:8px;
}}
@media screen and (min-width: 768px) {
    .ttl04 h3{
	font-size:32px;
}
    .ttl04 p{
	font-size:12px;
}}

/* -----------------------------------------------------------------------
 YouTube
------------------------------------------------------------------------*/
.frame-wrapper_yt {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.frame-wrapper_yt iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}



/* 以下不要*/

/* -----------------------------------------------------------------------
 セクション06
------------------------------------------------------------------------*/
.sec06{
	padding-bottom:20px; 
	background-image: url("../img/bg_voice.jpg");
		background-repeat: repeat;
background-attachment: fixed;
background-position: right bottom
}
.voiceInner{
	margin:40px 10px;}
.pola{
	width:65%;
	margin:0 auto;
}

@media screen and (min-width: 768px) {	.voiceInner {display: flex;
	margin:40px 40px 40px 0;}
	.pola{
	width:80%;
margin:0 auto;
 transform:rotate(-2deg); 
}
		.pola2{
 transform:rotate(2deg); 
}
.balloonArea{
	padding-top:10px; 
	margin-left: -20px;}
}
	
/* -----------------------------------------------------------------------
 ふきだしデザイン
------------------------------------------------------------------------*/
.balloon span{
	background:linear-gradient(transparent 60%, #ff6 60%);}

.balloonArea{
	width:100%;
}
.balloon {
	width:90%;
  position: relative;
  display: inline-block;
  margin: 20px 0 0 0;
  padding: 15px 20px;
  min-width: 100px;
  max-width: 100%;
  color: #333;
  font-size: 16px;
  background: #fff;
  border: solid 3px #74c29b;
  box-sizing: border-box;
  border-radius: 12px;
}


.balloon:before{
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-bottom: 12px solid #fff;
  z-index: 2;
}
.balloon:after{
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-bottom: 14px solid #74c29b;
  z-index: 1;
}
.balloon p {
  margin: 0;
  padding: 0;
	text-align: left;
}
@media screen and (min-width: 768px) {
	.balloon {
		width:100%;
  margin: 0 0 0 15px;
  padding: 15px;
}
	
.balloon:before{
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #fff;
  z-index: 2;
}
.balloon:after{
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid  #74c29b;
  z-index: 1;
}}
	
/* -----------------------------------------------------------------------
 セクション07
------------------------------------------------------------------------*/
.movieTtl p{
	font-size:16px;
	font-weight: bold;
	letter-spacing: 0.1em;
}
.movieTxt{
	/*background-color: #f7dc8d;*/
	padding: 10px 20px;
border:solid 1px gray;
	width:80%;
	margin: 0 auto;
}
.movieTxt p{
	font-size:14px;
	text-align: left;
}
@media screen and (min-width: 420px) {
	.movieTxt{
	width:70%;
}
}

@media screen and (min-width: 768px) {
.movieTxt{
	width:60%;
}
}

.sec07 video{
	width:90%;
}
@media screen and (min-width: 420px) {
	.sec07 video{
	width:80%;
	}}
@media screen and (min-width: 768px) {
	.sec07 video{
	width:70%;
	}}




/* -----------------------------------------------------------------------
 Amazonリンク
----------------------------------------------------------------------------*/
.linkAmz {
background-color: #f7dc8d;
 background-image: repeating-linear-gradient(-45deg, transparent, transparent 19px, rgba(255,255,255,.3) 1px, rgba(255,255,255,.3) 20px), repeating-linear-gradient(45deg, transparent, transparent 19px, rgba(255,255,255,.3) 1px, rgba(255,255,255,.3) 20px);
}

/*ベージュ#eedcb3*/
.linkAmz_inner{
	padding:10px 20px;
}
.linkAmz_inner a{
	display: block;
}
.linkAmz_inner p{
	padding-bottom:2px;
}
.linkAmz_btn{
	margin: 0 auto;
}
.linkAmz_btn img{
background-color: #333e48;
border-radius: 10px;
}
.linkAmz_btn .spOnly img{
width: 70%;
min-width:264px;
height: auto;
}

@media screen and (min-width: 768px) {
	.linkAmz_inner{
	padding:15px;
}
	.linkAmz_btn .pcOnly img{
max-width:396px;
height: auto;
}
		.linkAmz_btn .pcOnly a{
max-width:396px;
			margin: 0 auto;
			height: auto;
}
	.linkAmz_inner p{
	padding-bottom:5px;
}
}

/* -----------------------------------------------------------------------
 Amazonリンク（固定PC）
----------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
	.linkAmz_inner-pc{
		margin:15px 5px;
}
	.linkAmz_inner-pc a{
	display: block;
}
.linkAmz_inner-pc p{
	padding-bottom:5px;
	font-size:15px;
/* color:white;
	font-weight:bold;
	text-shadow: 0 0 5px rgba(153,120,23, 1);*/
}
	.linkAmz_btn-pc img{
width:90%;
	height: auto;
background-color: #333e48;
border-radius: 10px;
}
}


/* -----------------------------------------------------------------------
 fixedBtn　Amazonリンク（固定）
----------------------------------------------------------------------------*/
/*下に出る*/
.fixedBtn {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  animation-duration: 0.5s;
  animation-name: fade-in;
  -moz-animation-duration: 0.5s;
  -moz-animation-nametion: 0.5s;
  -moz-animation-name: fade-in;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: fade-in;
  animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards; }

  .fixedBtn.-active {
    animation-duration: 0.5s;
    animation-name: fade-out;
    -moz-animation-duration: 0.5s;
    -moz-animation-name: fade-out;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-name: fade-out;
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards; }

/*右下に出る*/
@media screen and (min-width: 768px) {
	.fixedBtn{
	  z-index: 2;
  width: 150px;
/*  height: 150px;*/
  position: fixed;
  right: 0px;
  bottom: 0px;
}}
