@charset "UTF-8";

/* common
-------------------------------------------------- */
html {
  font-size: 62.5%;
}

body {
  background-color: #f8f8f8;
  color: #000000;
  font-size: 1.6rem;
  line-height: 1.5;
  font-family: "ヒラギノ角ゴシック","Hiragino Sans","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","游ゴシック",YuGothic,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic", sans-serif;
  word-break: break-word;
}

a {
  color: #004eff;
}

a:hover {
	text-decoration:none;
}

img {
  display: block;
  max-width: 60%;
  margin:0 auto;
}

section {
	margin:50px 0;
}

.video {
	max-width: 60%;
	margin:28px auto 0 auto;
}
.video2 {
	max-width: 40%;
	margin:28px auto;
}

video {
	max-width: 100%;
}

.container{
  max-width: 680px;
  margin: 0 auto;
  padding: 30px;
  background-color: #fff;
}

.container h1{
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.4;
  text-align:center;
}


/*
.container h2{
  margin: 20px 0;
  padding:5px 0;
  border-bottom:8px double #0c50b5;
  color: #0c50b5;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.3;
  text-align:center;
}
*/

.container h3{
  color:#0a68ca;
  font-weight: 600;
  font-size: 2.2rem;
  border-bottom:2px solid #0a68ca;
}

.txtBox{
  margin: 20px 0;
}

.txtBox img{
	width:500px;
}


.container em{
  font-weight: 600;
}

.imgBox{
  margin:0;
}


.imgBox-top{
  margin: 28px 0 10px 0;
}

.btnBox{
  margin: 28px -16px;
  text-align: center;
}

.quote{
  margin: 28px 0;
  padding: 20px 24px;
  background-color: #f8f5ef;
  border-radius: 6px;
}
.quote li{
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1.7;
}
.quote dt{
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 2rem;
}
.review li{
  margin: 16px 0;
  padding: 20px 24px;
  border: 1px solid #ccc;
}
.review dt{
  margin-bottom: 12px;
  font-weight: 600;
}
.review dt span{
  color: #ff9d00;
  margin-left: 8px;
  white-space: nowrap;
}
.review dd{
  font-size: 1.6rem;
}
.summary{
  margin: 28px 0;
  padding: 16px 24px;
  background-color: #e4f8ff;
  border-radius: 6px;
}
.summary li{
  position: relative;
  padding-left: 26px;
  margin: 4px 0;
}
.summary li::before{
  position: absolute;
  top: 8px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #1a9ec9;
  font-size: 0;
  content: "";
}

.sp {
	display:none;
}

.list {
	background-color:#f2f2f2;
	padding:10px;
}

.list_y {
	background-color:#FFFF99;
	padding:10px;
	text-align: center;
}

.friend {
 	position: relative;
    display: inline-block;
    margin:0;
    padding: 15px 15px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 2rem;
    background: #FFF;
    border: solid 1px #555;
    box-sizing: border-box;
    border-radius: 15px;
}

header{
	width: 100%;
	background-color: #0968ca;
}

header h1{
	color: #ffffff;
	font-weight:bold;
	font-size:2.8rem;
	padding:2%;
	margin:0;
	text-align: center;
	line-height:1.4;
}

footer{
	width: 100%;
	background-color: #d5d5d5;
}

footer p {
	padding:10px;
	margin:0;
	text-align: center;
}

footer p a {
	color: #5c5c5c;
	text-decoration:none;
}

.mb0 {
	margin-bottom:5px;
}

.mb50 {
	margin-bottom:50px;
}

.review {
	max-width: 65%;
	border:3px solid #e2e2e2;
	padding:20px;
	margin:20px auto;
	border-radius:10px;
}

.review-name {
	margin:10px 0 ;
	font-weight:bold;
}

.review-img{
	margin:0;
}

.review-img img {
	max-width:100%;
}

.review-txt {
	margin:10px 0;
}

.border{
	border-top:1px solid #afafaf;
	padding-top: 10%;
}


.marker{
  background:linear-gradient(rgba(255, 255, 255, 0) 60%, #fff583 60%);
  font-weight: 600;
}

.tRed{
  color: #ea0000;
  font-weight: bold;
}

.tBlue{
  color: #008dea;
  font-weight: 600;
}

.tPink{
  color: #fa7ed6;
  font-weight: 600;
}

.b {
	font-weight:bold;
}

.small{
	font-size:12px;
	color:#919191;
}

.dokidoki {
    animation: dokidoki 1s infinite;
}
@keyframes dokidoki {
    0% {
        transform: scale(1.05)
    }
    50% {
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1.05)
    }
}

.date {
	font-size:2rem;
}

.caution {
	font-size:14px;
	color:#000000;
	text-align:left;
	max-width:75%;
	margin:0 auto;
}

.review-caution {
	font-size: 12px;
    color: #919191;
    text-align: right;
}

h2 {
    padding: 0.5em;
    color: #0a68ca;
    background: #eff7ff;
    border-left: solid 9px #0a68ca;
    font-weight: bold;
    font-size: 2.2rem;
    line-height:1.3;
}

h2 span {
	font-size:2rem;
}

.h2-top {
	font-size:1.7rem;
	color: #0a68ca;
	font-weight: bold;
	text-align:center;
}

.ci-box {
	padding: 3%;
	border:2px solid #e4400b;
	margin:10% 5%;
	border-radius:10px;
}

.co-box {
	padding: 3%;
	border:2px solid #893100;
	margin:10% 5%;
	border-radius:10px;
}

.yg-box {
	padding: 3%;
	border:2px solid #0a68ca;
	margin:10% 5%;
	border-radius:10px;
}

.taste-ci {
    font-weight: bold;
    color: #e4400b;
    margin: 4% 0;
    text-align: center;
}

.taste-co {
	font-weight:bold;
	color:#893100;
    margin: 4% 0;
    text-align: center;
}

.taste-yg {
	font-weight:bold;
	color:#0a68ca;
    margin: 4% 0;
    text-align: center;
}

.orange {
	color:#e4400b;
}

.brown {
	color:#893100;
}

.blue {
	color:#0a68ca;
}

.taste-txt {
	font-weight:bold;
	margin-top:20px;
}
/*** SP ***/
@media screen and (max-width: 768px) {
	.sp {
		display:block;
	}
	
	.container {
		padding: 20px;
	}
	
	header h1 {
		font-size:2rem;
	}

	img{
		max-width:100%;
	}
	
	.video {
		max-width:100%;
	}
	
	.video2 {
		max-width:70%;
	}
	
	.review {
		max-width:100%;
	}
	
	.caution {
		max-width:100%;
	}

}