@charset "utf-8";
.black {
    background-color: #0f0f0f;
}
.gray {
    background-color: #535353;
}
.gray333333 {
    background-color: #333333;
}

.White {
    background-color: #FFFFFF;
}
.topics {
    background-color: #ECECEC;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 8px;
    padding-bottom: 4px;
    font-size: 14px;
    line-height: 100%;
    border-radius: 6px;
    color: #1B1B1B;
    height: 400px;
}
.topicsTitle {
    font-weight: normal;
    font-size: 16px;
    border-bottom: 2px solid #FF0000;
    padding-left: 2px;
    padding-bottom: 3px;
}
.topicsLine {
    border-top: 1px solid #838383;
    margin-top: 1.8vw;

}
.topicsContentsBox {
    overflow-y: auto;
    height: 350px;
    -webkit-overflow-scrolling : touch;
}
.topicsDate {
    color: #BB0004;
    margin-bottom: 4px;
    margin-top: 6px;
}
.topicsContents {
    margin-left: 16px;
    line-height: 130%;
}




.with100 {
    width: auto;
}
h1  {
    font-family: 'Noto Serif JP', serif;
    font-size: 60px;
    text-indent: -60px;
    margin-left: 60px;
}
.underLine {
    font-weight: bold;
    color: #FF0000;
}

.bodyText {
    font-size: 16px;
    line-height: 160%;
}
.row h2  {
    font-family: 'Noto Serif JP', serif;
    font-size: 44px;
    text-indent: -44px;
    margin-left: 44px;
}

.row h3 {
    font-size: 38px;
    margin-bottom: 24px;
}
.row h4 {
    color: #FFFFFF;
    font-size: 26px;
    font-weight: normal;
    background-color: #3F3F3F;
    width: 100%;
    text-align: center;
    border-radius: 4px;
    padding-top: 8px;
    padding-bottom: 4px;
    margin-top: 5vw;
    margin-bottom: 2vw;
}
.iconFull {
    display: block;
}
.iconMin {
    display: none;
}
.imgRelative {
    position: relative;
}
#imgAbsolute {
    position: fixed;
    left: 16px;
    padding-top: 54px;
    top: -50px;
}
.textWhite {
    color: #FFFFFF;
}
.readWhatsAging {
    color: #FFFFFF;
    font-size: 20px;
    line-height: 180%;
    text-shadow: 2px 2px 2px #000000;
}
.readOriginal {
    color: #000000;
    font-size: 20px;
    line-height: 180%;
}
.readWhite {
    color: #FFFFFF;
    font-size: 20px;
    line-height: 180%;
}
.txtWhite {
    color: #FFFFFF;
}


.margin0 {
    margin-left: 0;
    margin-right: 0;
}
.beforeAfter {
    position: absolute;
    margin-left: 5%;
    top: 0;
    font-size: 24px;
}
.assessmentText1 {
    color: #FFFFFF;
    font-size: 20px;
    line-height: 180%;
}
.assessmentText1 a {
    color: #FFFFFF;
    text-decoration: underline;
}
.assessmentText1 a:hover, .assessmentText1 a:active, .assessmentText1 a:focus {
    color: #BB0004;
}
.assessmentText2 {
    color: #FFFFFF;
    font-size: 16px;
    line-height: 180%;
}
.assessmentText2UL {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 160%;
    margin-top: 10px;
    margin-left: -18px;
}
.assessmentText2result {
    color: #FFFFFF;
    font-size: 16px;
    line-height: 180%;
    border: 2px solid #FFFFFF;
    border-radius: 6px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 4px;
}
.sampleTable {
    color: #FFFFFF;
}
.sampleTable tbody tr td {
    color: #FFFFFF;
    font-size: 16px;
    line-height: 160%;
    padding-top: 0px;
    padding-right: 4px;
    padding-bottom: 0px;
    padding-left: 0px;
    white-space: normal;
    border-top: 1px solid #292929;
    border-bottom: 1px solid #292929;
    text-align: left;
}
.table-responsive tbody tr td {
    border-top: 1px solid #8B8B8B;
    color: #000000;
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 6px;
    line-height: 100%;
    padding-left: 8px;
    vertical-align: top;
    white-space: nowrap;
    border-bottom: 1px solid #8B8B8B;
}
.partner {
    color: #000000;
    font-size: 20px;
    line-height: 180%;
}
.partner-sakura {
    font-size: 14px;
    text-align: center;
    margin-top: 5vw;
}
.partner-sakura-full {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 7vw;
    display: block;
    margin-top: 0px;

}
.partner-sakura-min {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0vw;
    display: none;

}


.footer0 {
    background-color: #535353;
    border-top: 3px solid #B30000;
    padding-top: 3vw;
    padding-bottom: 1vw;
}
.footer1yes {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 150%;
    text-align: left;
    padding-left: 10px;
    display: block;
}
.footer1no {
    display: none;
}

.footer2{
    color: #FFFFFF;
    font-size: 14px;
    line-height: 150%;
    text-align: right;
    padding-right: 10px;
}

.logofull {
    display: block !important;
}
.logomin {
    display: none !important;
}
.marginBottom {
    margin-bottom: 2vw;
}
.col-xs-12.col-md-4.col-md-offset-1 a:hover img {
	opacity:0.9;
	filter:alpha(opacity=90);
	-ms-filter: "alpha( opacity=90 )";
}

.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
.exam {
    color: #FFFFFF;
    font-size: 16px;
}
.exam a {
    color: #FFFFFF;
    text-decoration: none;
}
.exam a:hover, .exam a:active, exam a:focus {
    text-decoration: underline;
}




#topicsWidth {
    max-width: 1920px;
    width: 100%;
	margin:0 auto;
}
#originalWidth {
    max-width: 1920px;
    width: 100%;
	margin:0 auto;
}
#originalWidth2 {
    max-width: 1920px;
    width: 100%;
	margin:0 auto;
}
#principleWidth {
    max-width: 1920px;
    width: 100%;
	margin:0 auto;
}
#principleWidth2 {
    max-width: 1920px;
    width: 100%;
	margin:0 auto;
}
#EvaluationWidth {
    max-width: 1920px;
    width: 100%;
	margin:0 auto;
}
#EvaluationWidth2 {
    max-width: 1920px;
    width: 100%;
	margin:0 auto;
}
.width1920px {
    max-width: 1920px;
    width: 100%;
	margin:0 auto;
}
#possibilityWidth2 {
    max-width: 1920px;
    width: 100%;
	margin:0 auto;
}
.originalTitleFrame {
    width: auto;
    background-color: #BB6B6B;
    margin-bottom: 21px;
    font-size: 24px;
    color: #FFFFFF;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 9px;
}
.sampleRoundFrame {
    width: auto;
    border: 2px solid #FFFFFF;
    border-radius: 6px;
    margin-top: 30px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 6px;
}
.sampleBulletText {
    text-indent: -16px;
    margin-left: 16px;
    margin-bottom: 2px;
    font-size: 16px;
}
.cookingMaterial {
    padding-top: 2px;
    padding-bottom: 0px;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 20px;
    padding-left: 8px;
    padding-right: 8px;
    vertical-align: top;
    display: inline-block;
    margin-bottom: 6px;
}
.cookingPoint {
    padding-bottom: 0px;
    color: #FFFFFF;
    font-size: 24px;
    width: auto;
    vertical-align: top;
}

.arrow_box{
    font-family: 'Noto Serif JP', serif;
    position: relative;
    height: auto;
    background: #ffffff;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
    text-align: left;
    border: 2px solid #646464;
    color: #000000;
    font-size: 20px;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    max-width: 700px;
    margin-bottom: 60px;
}
.arrow_box:after,.arrow_box:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    top:100%;
    left:70%;
}
.arrow_box:after{
    border-color: rgba(255, 255, 255, 0);
    border-top-width:31px;
    border-bottom-width:31px;
    border-left-width:11px;
    border-right-width:11px;
    margin-left: -11px;
    border-top-color:#ffffff;
}
.arrow_box:before{
    border-color: rgba(100, 100, 100, 0);
    border-top-width:36px;
    border-bottom-width:36px;
    border-left-width:13px;
    border-right-width:13px;
    margin-left: -13px;
    margin-top: 2px;
    border-top-color:#646464;
}






























@media (max-width: 767px){
#topicsWidth {
    max-width: 1920px;
    width: 100%;
	margin:0 auto;
}
#topicsWidth {
    max-width: 1920px;
    width: 100%;
	margin:0 auto;
}
.exam {
    color: #FFFFFF;
    font-size: 16px;
}
.footer1yes {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 150%;
    text-align: left;
}

h1  {
    font-size: 50px;
    text-indent: -50px;
    margin-left: 50px;
}
.row h2 {
    font-size: 35px;
    margin-left: 35px;
    text-indent: -35px;
    line-height: 120%;
}
.row h4 {
    font-size: 18px;
    margin-top: 8vw;
}

.bodyText {
    font-size: 14px;
    margin-bottom: 0%;
}
.iconFull {
    display: none;
}
.iconMin {
    display: block;
    margin-top: 5%;
}
.readWhatsAging {
    font-size: 16px;
    line-height: 150%;
    background-color: rgba(0,0,0,0.56);
    border-radius: 6px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.readOriginal {
    font-size: 16px;
    line-height: 165%;
}
.readWhite {
    font-size: 16px;
    line-height: 165%;
}

.fig {
    font-size: 14px;
}
.beforeAfter {
    font-size: 16px;
    margin-left: 3%;
    margin-top: -10px;
}
.assessmentText1 {
    font-size: 16px;
}

.assessmentText2 {
    font-size: 14px;
    margin-left: 0vw;
    line-height: 150%;
}
.assessmentText3 {
    font-size: 16px;
}
.t12px {
    font-size: 12px;
}


tbody tr td {
    font-size: 12px;
}
.partner {
    font-size: 16px;
    line-height: 165%;
}

.footer1yes {
    font-size: 12px;
    text-align: center;
    display: block;
}
.footer1no {
    display: none;
}
.footer2 {
    text-align: center;
    font-size: 12px;
}

    .logofull {
    display: none !important;
    }
.logomin {
    display: block !important;
    }

.assessmentText2UL {
    color: #FFFFFF;
    font-size: 12px;
    line-height: 150%;
    margin-top: 8px;
    margin-left: -18px;
}
.assessmentText2result {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 165%;
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 4px;
}

.sampleTable tbody tr td {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 160%;
    padding-top: 0px;
    padding-right: 4px;
    padding-bottom: 0px;
    padding-left: 0px;
    white-space: normal;
}
.topics {
    font-size: 12px;
}
.topicsTitle {
    font-size: 14px;
}
.partner-sakura-full {
    margin-left: auto;
    margin-right: auto;
    display: none;
}
.partner-sakura-min {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8vw;
}
.SnsFB {
    background-color: #F5F5F5;
    color: #494949;
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
    margin-top: 20px;
}

.SnsBlog {
    background-color: #F5F5F5;
    color: #494949;
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
}
.SnsUrl {
    color: #FFFFFF;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
    line-height: 180%;
}
.SnsUrl a  {
    color: #FFFFFF;
    text-decoration: none;
}
.SnsUrl a:hover, .SnsUrl a:active, .SnsUrl a:focus {
    color: #FFFFFF;
    text-decoration: underline;
}
.exam {
    color: #FFFFFF;
    font-size: 12px;
}
.exam a {
    color: #FFFFFF;
    text-decoration: none;
}
.exam a:hover, .exam a:active, exam a:focus {
    text-decoration: underline;
}
.cookingMaterial {
    padding-top: 2px;
    padding-bottom: 0px;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 18px;
    padding-left: 8px;
    padding-right: 8px;
    vertical-align: top;
    display: inline-block;
    margin-bottom: 6px;
}
.cookingPoint {
    padding-bottom: 0px;
    color: #FFFFFF;
    font-size: 18px;
    width: auto;
    vertical-align: top;
}
.topics {
    height: 180px;
}
.topicsContentsBox {
    height: 135px;
}



















}









@media (min-width:768px){
.SnsFB {
    background-color: #F5F5F5;
    color: #494949;
    text-align: center;
    border-right: 10px solid #646464;
    font-size: 14px;
    margin-bottom: 10px;
}

.SnsBlog {
    background-color: #F5F5F5;
    color: #494949;
    text-align: center;
    border-left: 10px solid #646464;
    font-size: 14px;
    margin-bottom: 10px;
}
.SnsUrl  {
    color: #FFFFFF;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    line-height: 180%;
}
.SnsUrl a  {
    color: #FFFFFF;
    text-decoration: none;
}
.SnsUrl a:hover, .SnsUrl a:active, .SnsUrl a:focus {
    color: #FFFFFF;
    text-decoration: underline;
}


}




@media (max-width: 326px){
.partner-sakura-full {
    margin-left: auto;
    margin-right: auto;
    display: none;
}
.partner-sakura-full {
    margin-left: auto;
    margin-right: auto;
    display: none;
}
.footer1no {
    display: block;
    color: #FFFFFF;
    font-size: 12px;
    line-height: 150%;
    text-align: center;
}
.footer1yes {
    display: none;
}
.SnsFB {
    background-color: #F5F5F5;
    color: #494949;
    text-align: center;
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 20px;
}

.SnsBlog {
    background-color: #F5F5F5;
    color: #494949;
    text-align: center;
    font-size: 16px;
    margin-bottom: 10px;
}
.SnsUrl {
    color: #FFFFFF;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    line-height: 180%;
}
.SnsUrl a  {
    color: #FFFFFF;
    text-decoration: none;
}
.SnsUrl a:hover, .SnsUrl a:active, .SnsUrl a:focus {
    color: #FFFFFF;
    text-decoration: underline;
}
.sampleBulletText {
    text-indent: -14px;
    margin-left: 14px;
    margin-bottom: 2px;
    font-size: 14px;
}
.row h3 {
    font-size: 30px;
}
h1 {
    font-size: 38px;
    margin-left: 38px;
    text-indent: -38px;
}
.row h2 {
    font-size: 28px;
    margin-left: 28px;
    text-indent: -28px;
}


}