@charset "utf-8";
/*
Theme Name: oishi_fn
*/




@font-face {font-family: "vdl-v7gothic", sans-serif;
font-weight: 300;
font-style: normal;}
body {color: #000;margin: 0px;padding: 0px;background:#fff;z-index: 0;font-size:16px;font-family: "vdl-v7gothic", sans-serif;font-weight: 300;font-style: normal;}
img{width: 100%;}
a:hover{opacity: 0.5;}

img.noenl{width: 100%;}
.wrap{width: 95%;margin: 0 auto;max-width: 960px;}
p{text-align: justify;font-family: "vdl-v7gothic", sans-serif; font-weight: 300; font-style: normal; line-height: 150%;}
strong{font-weight: bold;}
.forsp {display: block !important;}
.forpc{display: none !important;}
.img_right {float:none; width: 100%;margin: 0 auto 2rem auto;}
.img_left {float:left; width: 100%;margin: 0 auto 2rem auto;}
.btn{width: 90%;margin: 20px auto 0 auto;max-width: 600px;}
.btn-s{width: 50%;max-width: 320px;min-width: 250px;margin:20px 0 0 0;}
.btn-last{width: 100%;max-width: 700px;margin: 20px auto 0 auto;}
.img_center{margin: 20px auto !important;}
/* フォント*/
.brown{color:#5D4100;}
.red{color:#9C3537;}
.l-red{color:#FF5E61;}
.l-blue{color: #AFEEFB;}
.pink{color: #AE6082;}
.green{color: #4E8E70;}
.blue{color: #007EAC;}
.orange{color:#FF7C09;}
.white{color: #fff;}
.yellow{color:#FFFA60;}
.under{text-decoration: underline;}
.marker{background-image: linear-gradient(transparent 70%, #FFFA60 70%);}
.bold{font-family: "vdl-v7gothic", sans-serif; font-weight: 700; font-style: normal;}
.fontL{font-size: 18px;}
.font_title{font-size: 20px; margin: 0 auto 10px auto;}
h2{font-size: 24px; font-weight: bold; margin: 30px 0;}

/***************
     main
***************/
header{background:url("images/header_bg_sp.png"); padding:10px 0 0 0; text-align: center; background-size: cover; background-position: center top;}
.lessonbtn{display: flex; justify-content:space-between; margin:10px auto 0 auto; flex-wrap: wrap; width: 95%; align-items: flex-start;}
.lessonbtn a{display: inline-block; width: 33%;}
.cs{width: 33%;}
.head-pic{width: 80px; position: absolute; bottom: 0; right: 0;}
.main {margin: 0 auto;background: url("images/main-bk.png");background-size: contain;background-position: right bottom -140px; background-repeat: no-repeat;width: 95%; margin: 0 auto;
padding: 20px 0 20px 0;}
.main-txt-box{margin: 0 auto;}
.main-txt-box .point{width: 100%; margin-bottom: 10px;}
.main-txt{margin: 20px auto 20px auto;}
.sub-title{width:  100%;}
.font_title{text-align: center !important; }
.seminar{width: 95%;  margin: 10px auto; border: solid 5px #5AB7BC; position: relative;}
.gr{position: absolute; height: 100%; width: 100%; background:rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center;}
.gr p{color: #fff; font-size: 30px; text-align: center;}
.sm-sample{margin: 0 0 10px 0;}
.end{background:rgba(0,0,0,0.88);display: flex; position: absolute; width: 100%; height: 100%; align-items: center; justify-content: center;}
.end-txt{color: #fff; font-size:20px;}
/***************
    comment
***************/
.comment_fb {
  border: solid thin rgba(189, 211, 231, 1.00);
  padding: 1rem;
}
.commentCont h3 {
  margin-bottom: 0;
}
#comments {
  margin: 0 auto
}
#comments h3.comment-reply-title, h3.comentwrite {
  margin: 30px auto 10px auto;
  padding: 10px;
  text-align: center;
  color: #fff;
  border-top: #FFE964 solid 3px;
  border-bottom: #FFE964 solid 3px;
  background: #5AB7BC;
}
.comment-form-comment label, .comment-form-author label, .comment-form-email label {
  width: 115px;
}
#comments textarea {
  width: 80%;
  margin: 20px auto 0;
  vertical-align: middle;
}
#comments input[type="text"], #comments input[type="email"], #comments textarea {
  padding: 0.8em;
  outline: none;
  border: 1px solid #DDD;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-size: 16px;
}
#comments input[type="submit"] {
  display: block;
  max-width: 500px;
  margin: 10px auto 0;
  padding: 15px 50px;
  background: #f76e00;
  font-size: 20px;
  color: #fff;
  border-radius: 5px;
}
#comments input[type="submit"]:hover {
  background: #ffb82e;
}
.comment-form-comment label, .comment-form-author label, .comment-form-email label {
  width: 150px;
  margin: 20px auto;
  display: inline-block;
}
.comment-form-url {
  display: none;
}
.commentlist {
  margin: 0 auto;
  padding: 0;
  background:#fff;
  font-size: 0.8em;
}
.commentlist li {
  margin: 0px 0px 25px 0px;
	list-style: none;
	 padding:10px;
	 background:#FFFAD8;
}
.commentlist header {
  height: auto;
  background: none;
  padding: 10px 0;
}
.commentlist header img {
  display: none;
  vertical-align: middle;
}
.comment-author {
  text-align: left;
  margin-bottom: 10px;
}
.comment-respond {
  margin: 0 0 30px 0;
}
.comentwrite {
  padding: 30px 0px 0px 0px;
}
.comments-title, .comment_count {
  margin: 0px;
  display: none;
}
.commentlist .reply {
  text-align: right;
}
#cancel-comment-reply-link {
  color: #ddd;
}
.comment_at {
  padding: 1rem;
  font-size: 16px;
  background-color: #E5F4FC;
  margin: 10px auto;
  text-align: justify;
  color: #C51B1B;
}
nav#comment-nav-below {
  background: #E5F4FC;
  font-size: 1.0rem;
}
nav#comment-nav-below h1 {
  display: none;
}
/***************
    contents
***************/
.img_right {float:right; width: 100%;margin: 0 auto 2rem auto;}

.contain{padding:0;}
.contain .wrapper {width: 90%;margin: 0 auto;padding:2rem 1rem;background-color:rgba(255,255,255,0.6);z-index:10;}
.contain .wrapper p {text-align: justify;padding: 2rem 0;}
.lead{background:url("../images/lead-bk.png");background-position: top 0 center;padding-bottom:4rem;backgrounds-size:contain;z-index:1;position: relative;max-width: 980px;margin:-6rem auto 0 auto;text-align:center;}
.head-line{background: #007EAC; text-align: center; color: #fff; font-weight: 700; font-size: 20px; line-height: 150%; padding:10px;margin: 0 auto 30px auto;}
.head-line .dot{margin:0; height: 2px; background-image : linear-gradient(to right, #fff, #fff 5px, transparent 5px, transparent 10px); /* 幅2の線を作る */
background-size: 10px 5px;          /* グラデーションの幅・高さを指定 */
background-position: left bottom;  /* 背景の開始位置を指定 */
background-repeat: repeat-x;       /* 横向きにのみ繰り返す */
}
.hl-txt{font-weight: 700; padding:20px 0}

.maintitle{background: #5AB7BC; text-align: center; padding: 20px 10px;}


.title{background:#FFE964; padding: 30px 10px; text-align: center;}
.title2{background: #5AB7BC; padding: 30px 10px; text-align: center;}
.title3{background: #FFE964; padding: 30px 10px; text-align: center;}
.title4{background: #FFE964; padding: 30px 10px; text-align: center;}
.title5{background: #FFE964; padding: 30px 10px; text-align: center;}

.nittei{background: #fff; padding: 20px 0;}
.nittei .wrap{text-align: center;}
.nittei_box{background: #5AB7BC; border-radius: 5px; padding:10px; margin-top: 20px; text-align: center;}
.nittei_box table.tbl2{width: 100%; border: none; border-collapse: separate; border-spacing: 5px; margin-bottom: 20px;}
.nittei_box table.tbl2 td{padding: 10px; width:calc(100% - 20px); color: #000; display: block;}
.nittei_box table.tbl2 th{padding: 10px; width:calc(100% - 20px); color: #000; display: block;}
.nittei_box table.tbl2 th{background:#FFE964; text-align: center; font-size: 18px; font-weight: bold;}
.nittei_box table.tbl2 td{background:#FFF; text-align: left; font-size: 16px; vertical-align: middle;}
.nittei_box table.tbl2 td img{width:auto;}

.sankahi{background: #FFE964; padding: 20px 0; text-align: center;}
.sankahi .wrap img {margin: 10px 0;}
.sankahi .wrap p{margin: 10px 0;}

.tokuten{background: url("../images/tokuten_bg.png") center repeat-y; padding: 20px 0; text-align: center;}
.toku_box{background: #5AB7BC; padding: 5px; border-radius: 10px; margin: 30px 0;}
.toku_box .cont{background: #5AB7BC; border: 5px solid #fff; border-radius: 10px; padding: 10px; text-align: center;}
.toku_box .cont h2{background: #339398; padding: 10px 0; border-radius: 50px; text-align: center; font-size: 24px; color: #fff; font-weight: bold; width: 250px; margin: 0px auto;}
.toku_box .cont h2.ex{background: #FFAA00;}
.cont_title{font-size: 24px; color: #fff; font-weight: bold !important; text-align: center !important;}
.cont_title span{font-size: 18px;}
.cont_text{background: #FFF7C4; padding: 10px; margin-top: 10px;}
.cont_text p{margin-bottom: 20px;}

.sec1{background:#FFE964; padding:5px 0;}
.border{height: 5px; background:#fff; display: block; width: 100%;}
.sec1_title{margin: 10px auto 10px auto; max-width: 250px; width: 90%;}
.step_last{display: none;}

.movie{border: 1px solid #000; margin-bottom: 20px;}
.flow{border: #339398 solid 10px; padding: 10px;}
.commentnaiyou{border: #FFE964 solid 3px; background: #5AB7BC; padding: 0 10px 10px 10px; margin: 10px 0;}

/*gift*/
.sec-gift{background:#FFFDC2; padding:30px 0px;}
.head-line_gift{font-family: "vdl-v7gothic", sans-serif;
font-weight: 700;
font-style: normal; text-align: center; font-size: 20px; line-height: 150%;}
.icon{width: 80px;margin: 0 auto 10px auto;}	
.gift-box{background:#007EAC; border-radius: 10px; padding:20px; margin: 20px auto;}
.gift-title{background:#005472; border-radius: 10px; display: flex; line-height: 150%;
color: #fff; font-size: 20px; font-weight: 700;justify-content: center; align-items: center;padding:20px 0; margin: 0 auto 20px auto; flex-wrap: wrap; text-align: center;}
.icon-gift{width: 80px;}
.gift-label{background:#FFFA60; font-weight: 700; padding:20px; margin: 10px auto 10px auto;}
.index-title{text-align: center; font-size: 30px;}
.gift-index{background:#CCE8F1; padding:20px; margin: 10px auto 20px auto}
ul.index-list{list-style-type: decimal; padding-left: 30px}
ul.index-list li{font-weight: 500; line-height: 200%;font-size: 20px;}	

/*step*/
.sec-step{padding:0 0 20px 0;}
.step-box{display: flex; border: solid 5px #000; align-items: center; justify-content: center; padding:10px 0; margin: 10px auto; flex-wrap: wrap;}
.step-no{background: #FFFA60; border-radius: 150px; padding:10px 0;
font-weight: 700; font-size:20px; width: 100%; text-align: center; max-width: 150px; margin-bottom: 10px;}
.step-txt{width: 65%; font-weight: 700; font-size: 20px; line-height: 150%;}
.step-icon{width: 30%;}
.step-arrow{width: 0;height: 0;border-style: solid;border-width: 25px 40px 0 40px;border-color: #007eac transparent transparent transparent;
margin: 0 auto;}

/*change*/
.sec-change{background:#D7ECF1; padding:30px 0 0 0;}
.hl-change{font-weight: 700; text-align: center; font-size: 20px; line-height: 150%;}
.change-box{background:#fff; border-radius: 10px; border: solid 5px #000; margin: 10px auto 20px auto;}
 ul.change-list{ list-style: none;padding:20px 0;;width: 90%;margin: 0 auto; padding-left: 1em;text-indent: -1em;}
 ul.change-list li{font-size:20px; font-weight: bold; text-align: justify;color: #000;padding:15px 0; line-height: 150%;}
 ul.change-list li::before {left: 1.5rem; font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f304'; color: #973E62;}

/*sec-video*/
.sec-video{ padding:0 0 20px 0;}
.video-box{text-align: center; margin: 0 auto 20px auto;}
.video-title{font-weight: bold; font-size:20px; line-height: 150%; text-align: center; margin-bottom:10px;}
.video-no{background:#007EAC; border-radius: 150px; text-align: center; color: #fff; padding:10px 0; width: 90%; max-width: 200px; margin: 0 auto;font-weight: 700;}

/*sec-profile*/
.sec-profile{background:#FFFDC2; padding:30px 0}
.head-line_prof{font-family: "vdl-v7gothic", sans-serif;
font-weight: 700;
font-style: normal; text-align: center; font-size: 20px; line-height: 150%;}
.profile-box{background:#fff; border-radius: 10px; border: solid 5px #007EAC; padding: 20px 10px; margin: 20px auto 0;}
.profile-name{font-weight: 700; text-align: center; color: #007EAC; font-size: 30px;}
.profile-copy{text-align: center; font-weight: 700;  color: #000; font-size: 20px; line-height: 150%;}
.profile-pic{background:#D7ECF1; height: 200px; width: 90%; margin: 20px auto;}


 /*footer*/
footer {background-color: #007EAC;margin: 0 auto;padding:0 0 2rem 0;color: #fff;font-size: 14px; line-height: 150%;}
footer p {padding:2rem 0 0 0;text-align: center; line-height: 150%;}
footer a, footer a:active, footer a:visited {color: #fff;text-decoration: underline;}
footer a:hover {color: #bbb;}

/********
    PC
*********/

@media screen and (min-width: 720px) {
.wrap{width: 95%;margin: 0 auto;max-width: 960px;}
.wrap p{text-align: left;font-family: "vdl-v7gothic", sans-serif; font-weight: 400;font-style: normal; padding-bottom: 10px; line-height: 150%; margin: 0 auto 20px auto;}
.forsp {display: none !important;}
.forpc{display: block !important;}
.head-line{background: #007EAC; text-align: center; color: #fff; font-weight: 700; font-size: 30px; line-height: 150%; padding:10px;margin: 0 auto 30px auto;}
img{width:100%;}
img.noenl{width: auto;}
/***************
     main
***************/
header{background: url("images/header_bg.png"); padding:80px 0 70px 0; text-align: center; background-position: center top; background-size: cover; background-repeat: no-repeat;}
.lessonbtn{display: flex; justify-content:space-between; width:980px; margin:30px auto;}
.lessonbtn img{width: auto;}
.main {margin: 0 auto;background: url("../images/main-bk.png");background-size:55%;background-position:right bottom;background-repeat: no-repeat; max-width: 980px;}
.main-title {padding:20px 0 30px 0; }
.main-txt-box{padding: 0; margin: 0 auto 10px auto;}
.main-txt-box .point{width: 100%}
.sub-title{width: 80%;margin: 0 auto;}
.main-txt{ margin: 20px auto 20px auto;}
.font_title{text-align: center !important; font-size: 30px;}
/***************
		 comment
***************/
  #comments {
    margin: 10px 0;
  }
  nav#comment-nav-below {
    background: #fff;
    font-size: 1.0rem;
  }
  nav#comment-nav-below h1 {
    display: none;
  }
  #comments h3.comment-reply-title, h3.comentwrite {
    margin: 5% auto 0 auto;
  }
  #comments textarea, #comments input[type="text"], #comments input[type="email"] {
    width: 92%;
    margin: 0 auto;
  }
  #comments input[type="submit"] {
    display: block;
    max-width: 500px;
    margin: 10px auto 0;
    padding: 20px 100px;
    font-size: 1.6em;
  }
  #comments input[type="submit"]:active {
    background: #ffb82e;
  }
  .comment-form-comment label, .comment-form-author label, .comment-form-email label {
    width: 200px;
    margin: 20px auto 10px;
    display: inline-block;
  }
  .commentlist {
    margin: 0 auto;
    padding: 10px 0px;
    font-size: 0.9em;
	background:#fff;
  }
  .commentlist li {
    margin: 10px 0 20px 0;
	list-style: none;
	 padding:10px;
	 background:#FFFAD8;
  }
	.comment-form-comment, .comment-form-author, .comment-form-email{margin: 0!important;}
/***************
     contain
***************/

.contain{padding:0;}
.contain .wrapper {width: 90%;margin: 0 auto;padding:2rem 1rem;background-color:rgba(255,255,255,0.6);z-index:10;}
.contain .wrapper p {text-align: justify;padding: 2rem 0;}
.lead{background:url("../images/lead-bk.png");background-position: top 0 center;padding-bottom:4rem;backgrounds-size:contain;z-index:1;position: relative;max-width: 980px;margin:-6rem auto 0 auto;text-align:center;}
.head-line{background: #007EAC; text-align: center; color: #fff; font-weight: 700; font-size: 20px; line-height: 150%; padding:10px;margin: 0 auto 30px auto;}
.head-line .dot{margin:0; height: 2px; background-image : linear-gradient(to right, #fff, #fff 5px, transparent 5px, transparent 10px); /* 幅2の線を作る */
background-size: 10px 5px;          /* グラデーションの幅・高さを指定 */
background-position: left bottom;  /* 背景の開始位置を指定 */
background-repeat: repeat-x;       /* 横向きにのみ繰り返す */
}
.hl-txt{font-weight: 700; padding:20px 0}

.maintitle{background: #5AB7BC; text-align: center; padding: 20px 0;}
.maintitle img{width:611px;}

.title{background:#FFE964; padding: 50px 0; text-align: center;}
.title2{background: #5AB7BC; padding: 50px 0; text-align: center;}
.title3{background: #FFE964; padding: 50px 0; text-align: center;}
.title4{background: url("../images/title_bg1.png") no-repeat;  padding: 50px 0 100px 0; text-align: center;}
.title5{background: url("../images/title_bg1.png") no-repeat;  padding: 50px 0 150px 0; text-align: center;}

	
	
.sankahi{background: #FFE964; padding: 20px 0; text-align: center;}
.sankahi .wrap img {width: auto; margin: 20px 0;}
.sankahi .wrap p{margin: 20px 0;}

.tokuten{background: url("../images/tokuten_bg.png") center repeat-y; padding: 20px 0; text-align: center;}
.toku_box{background: #5AB7BC; padding: 5px; border-radius: 10px; margin: 30px 0;}
.toku_box .cont{background: #5AB7BC; border: 5px solid #fff; border-radius: 10px; padding: 15px; text-align: center;}
.toku_box .cont h2{background: #339398; padding: 10px 0; border-radius: 50px; text-align: center; font-size: 24px; color: #fff; font-weight: bold; width: 250px; margin: 0px auto;}
.toku_box .cont h2.ex{background: #FFAA00;}
.cont_title{font-size: 24px; color: #fff; font-weight: bold !important; text-align: center !important;}
.cont_title span{font-size: 18px;}
.cont_text{background: #FFF7C4; padding: 40px; margin-top: 20px;}
.cont_text p{margin-bottom: 20px;}

.sec1{ padding: 20px 0; text-align: center;}
.sec1_title{margin: -80px auto 30px auto;}
.sec1 p{text-align: left;}
.sec2{background:#FFF; padding: 20px 0; text-align: center;}
.sec2 p{margin: 30px 0 0 0;}
.seminar{width: 980px; margin: 0 auto; border: solid 5px #5AB7BC;}
.sm-sample{margin: 0 0 10px 0;}
.movie{border: 1px solid #000; margin: 20px auto; width: 740px;}
.commentnaiyou{border: #FFE964 solid 5px; background: #5AB7BC; padding: 0 20px 20px 20px; margin: 20px 0;}
	
	
/*change*/
.sec-change{background:#D7ECF1; padding:30px 0 0 0;}
.hl-change{font-weight: 700; text-align: center; font-size: 30px; line-height: 150%;}
.change-box{background:#fff; border-radius: 10px; border: solid 5px #000; margin: 10px auto 20px auto;}
 ul.change-list{ list-style: none;padding:20px 0;;width: 90%;margin: 0 auto; padding-left: 1em;text-indent: -1em;}
 ul.change-list li{font-size:20px; font-weight: bold; text-align: justify;color: #000;padding:15px 0; line-height: 150%;}
 ul.change-list li::before {left: 1.5rem; font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f304'; color: #973E62;}

/*sec-video*/
.sec-video{ padding:0 0 20px 0;}
.video-box{text-align: center; margin: 0 auto 20px auto;}
.video-title{font-weight: bold; font-size:30px; line-height: 150%; text-align: center; margin-bottom:10px;}
.video-no{background:#007EAC; border-radius: 150px; text-align: center; color: #fff; padding:10px 0; width: 90%; max-width: 200px; margin: 0 auto;font-weight: 700;}

/*sec-profile*/
.sec-profile{background:#FFFDC2; padding:30px 0}
.head-line_prof{font-family: "vdl-v7gothic", sans-serif;
font-weight: 700;
font-style: normal; text-align: center; font-size: 30px; line-height: 150%;}
.profile-box{background:#fff; border-radius: 10px; border: solid 5px #007EAC; padding:30px; margin: 20px auto 0;}
.profile-name{font-weight: 700; text-align: center; color: #007EAC; font-size: 30px;}
.profile-copy{text-align: center; font-weight: 700;  color: #000; font-size: 20px; line-height: 150%; margin-bottom: 10px;}
.profile-pic{background:#D7ECF1; height: 290px; width: 290px; margin: 20px auto;}

}