@charset "UTF-8";
/* CSS Document */


/*=========================================
基本設定
想定端末　一般的なAndroid のportrait 横幅360
=========================================*/
#title {
height: auto;
}
#title img {
height: 42px;
padding-bottom: 10px;
}


article {
padding: 0px;		
}

#yumitori_bg{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;

width: 100%;
height: 276px;
text-align: center;
background-image: url("../images/yumitori_sp.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

#shidou_link_wrapper{
padding: 20px 30px;
line-height: 1.6;
width: 85%;
max-width: 920px;
margin: 0 auto;
}


#shidou_link_wrapper a{
display: flex;
justify-content: flex-start;
align-items: center;


font-size: 2rem;
font-weight: 700;
text-decoration: none;
color: #2E2E2E;
transition-duration: 200ms;
}

#shidou_link_wrapper a:hover{
opacity: 0.5;
transition-duration: 500ms;
}



#shidou_wrapper p{
line-height: 1.6;
width: 85%;
max-width: 920px;
margin: 0 auto;
padding: 50px 0px 40px;
}

.shidou_link{
padding: 10px 0px;
}




/*角丸三角*/
.triangle_wrapper{
transform: rotate(60deg);
padding-top: 1px;
padding-right: 8px;
}

.triangle {
        position: relative;
        background-color: #31A65C;
        text-align: left;
}
.triangle:before,
.triangle:after {
        content: '';
        position: absolute;
        background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after {
        width:  1rem;
        height: 1rem;
        border-top-right-radius: 30%;
}

.triangle {
        transform: rotate(-60deg) skewX(-30deg) scale(1,.866);	
}
.triangle:before {
        transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle:after {
        transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}




/*指導説明*/
#jyuku,#shiko,#yumitori{
border-top: solid 2px #1E5F37;
padding-bottom: 60px;
}

.shidouname{
background-color: #1E5F37;
height: 82px;
width: 375px;
border-radius: 0 0 168px 0;
display: flex;
align-items: center;
margin-bottom: 30px;
}

.shidouname img{
padding: 0 16px;
}


#jyuku h1,#shiko h1,#yumitori h1{
font-size: 3rem;
font-weight: 700;
color: #fff;
line-height: 1;
}

.shidou_wrapper{
width: 85%;
max-width: 920px;
margin: 0 auto;
text-align: left;
}

#jyuku h2,#shiko h2,#yumitori h2{
font-size: 2.4rem;
color: #1E5F37;
padding-bottom: 14px;
}

#jyuku h3,#shiko h3,#yumitori h3{
font-size: 2.4rem;
font-weight: 700;
line-height: 1.6;
padding-bottom: 20px;
}

#jyuku p,#shiko p,#yumitori p{
line-height: 1.6;
padding-bottom: 60px;
width: 100%;
}

.lesson{
background-color: #CCA533;
border-radius: 10px;
color: #fff;
margin-bottom: 24px;
}

.lesson h1{
width: 90%;
margin: 0 auto;

}

#lesson_wrapper .lesson p{
width: 90%;
margin: 0 auto;
padding-bottom: 20px;
padding-top: 20px;
}




/*テーブル*/


th,td{
display: block;
width: 100%;
text-align: center;
height: 67px;
line-height: 1.4;
}



.table3{
border-top: solid 1px #dedede;
border-right: solid 1px #dedede;
border-left: solid 1px #dedede;
width: 100%;
background-color: #F8F8F8;
margin-bottom: 50px;
}

.table3 tr{
border-bottom: solid 1px #DEDEDE;
}


.table3 th{
font-weight: 700;
border-bottom: dashed 1px #DEDEDE;
display: flex;
justify-content: center;
align-items: center;
}

.table3 td{
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}

.table3 td a{
text-decoration: none;
color: #2E2E2E;
}




/*弓取り体操*/
#yumitori_wrapper{
text-align: center;
}

#yumitori_wrapper img{
width: 85%;
height: auto;
padding-bottom: 40px;
}

#yumitori_wrapper span{
font-size: 1.2rem;
}



@media screen and (min-width:570px){

#yumitori_bg{
background-image: url("../images/yumitori_pc.jpg");
}
}


/*ライン*/
.marker-animation.active{
    background-position: -100% .5em;
}
 
.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
    font-weight: bold;
}



/*=========================================
想定端末　iPhoneX,11pro のlandscape 横幅812以上　※カメラの出っ張りが左右にくる
=========================================*/
@media screen and (min-width:812px) and (orientation:landscape){



.shidouname img{
padding: 0 5px 0px 60px;
}

.shidouname{
width: 420px;
}


#lesson_wrapper{
display: flex;
justify-content: space-between;
align-items: stretch;
padding-bottom: 20px;
}

.lesson{
width: 48%;
}


/*テーブル*/
.table3{
width: 100%;
max-width: 920px;
margin: 0 auto;
}

tr{
display: flex;
}

#table1 th{
border-bottom: solid 1px #DEDEDE;
}

td{
border-left: dashed 1px #DEDEDE;
}

.table3 th{
border-bottom: none;
}


/*弓取り*/

#yumitori_wrapper{
width: 85%;
max-width: 920px;
margin: 0 auto;

display: flex;
justify-content: center;
align-items: flex-start;
}

#yumitori_wrapper img{
width: 310px;
}

#yumitori_bg{
height: 360px;
background-image: url("../images/yumitori_pc.jpg");
}

.shidou_wrapper.yu{
margin: 0px;
padding: 0px 0px 0px 50px;
}


}







/*
ここまでスマホ
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ここからタブレット縦（portrait）
*/

/*=========================================
想定端末　iPad 9.7 のportrait 横幅768以上かつ高さ429以上
=========================================*/
@media screen and (min-width:768px) and (min-height:429px){



.shidouname img{
padding: 0 16px;
}

#lesson_wrapper{
display: flex;
justify-content: space-between;
align-items: stretch;
padding-bottom: 20px;
}

.lesson{
width: 48%;
}




/*テーブル*/
.table3{
width: 100%;
max-width: 920px;
margin: 0 auto;
}

tr{
display: flex;
}

#table1 th{
border-bottom: solid 1px #DEDEDE;
}

td{
border-left: dashed 1px #DEDEDE;
}

.table3 th{
border-bottom: none;
}


/*弓取り*/

#yumitori_wrapper{
width: 85%;
max-width: 920px;
margin: 0 auto;

display: flex;
justify-content: center;
align-items: flex-start;
}

#yumitori_wrapper img{
width: 310px;
}

#yumitori_bg{
height: 360px;
background-image: url("../images/yumitori_pc.jpg");
}

.shidou_wrapper.yu{
margin: 0px;
padding: 0px 0px 0px 50px;
}



}/*iPad 9.7 のportrait 横幅768以上かつ高さ429以上 ここまで*/





/*=========================================
想定端末　iPad 9.7 のportrait 横幅870以上かつ高さ429以上
=========================================*/
@media screen and (min-width:870px) and (min-height:429px){

#yumitori_bg{
height: 420px;

}

}



/*
ここまでタブレット
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ここからPC ※マウスがある
*/


/*=========================================
想定端末　
PC　横幅1367以上 ※マウスがある
=========================================*/
@media screen and (min-width:1367px){

#yumitori_bg{
height: 500px;
}

#yumitori_wrapper img{
width: 480px;
}


}/*PC　横幅1367以上 ※マウスがある　ここまで*/


/*=========================================
想定端末　
PC　横幅1921以上 ※マウスがある
=========================================*/
@media screen and (min-width:1921px){

#yumitori_bg{
height: 580px;
}


}/*PC　横幅1921以上 ※マウスがある　ここまで*/