@charset "UTF-8";


/*PC*/
@media print, screen and (min-width: 768px) {

#thought{
position: relative;
overflow: hidden;
padding: 160px 0;
box-sizing: border-box;
margin: 0 auto;
background: url("../images/index/bg_thought.jpg") center center no-repeat;
background-size: cover;
}

#thought .section_wrap{
position: relative;
width:90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
}

#thought .section_wrap .txt_box{
width:55%;
margin:0 auto;
position: relative;
padding: 0 5%;
box-sizing: border-box;
}

#thought .section_wrap .txt_box .red_txt{
font-size: 3.6rem;
font-weight: 800;
letter-spacing: -.2rem;
line-height: 1;
margin: 0 0 60px;
display:table;
border: 5px solid #0000d9;
padding: 10px 35px;
box-sizing: border-box;
border-radius: 50rem;
}

#thought .section_wrap .txt_box .txt span{
font-size: 2.6rem;
font-weight: 800;
line-height: 1.4;
}

#thought .common_btn_box{
text-align: center;
}


#thought .section_wrap .txt_box  .illust_img{
margin-top: 60px;
}

#thought .section_wrap .img{
width: 45%;
position: relative;
z-index: 2;
}


#thought .section_wrap .img .img1{
width: 82%;
margin: 0 auto　0　0;
border-radius: 30px;
overflow: hidden;
}

#thought .section_wrap .img .img2{
width: 42%;
position: absolute;
top: 52%;
right:0;
border-radius: 30px;
overflow: hidden;
}


#thought article{
width: 100%;
overflow: hidden;
position:relative;
bottom:-20px;
left: 0;
z-index: 1;
}

#thought .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#thought .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 9rem;
font-weight: 700;
letter-spacing: -.5rem;
line-height: 1;
overflow: hidden;
color:#0000d9;
}

#thought .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#thought .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}


#thought .icon1{
position: absolute;
top: 30px;
left: 40px;
z-index: 5;
width: 260px;
}



}
/*sp*/
@media only screen and (max-width: 767px) {

#thought{
position: relative;
overflow: hidden;
padding: 160px 0;
box-sizing: border-box;
margin: 0 auto;
background: url("../images/index/bg_thought.jpg") center center no-repeat;
background-size: cover;
}

#thought .section_wrap{
position: relative;
width:90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
}

#thought .section_wrap .txt_box{
width:55%;
margin:0 auto;
position: relative;
padding: 0 5%;
box-sizing: border-box;
}

#thought .section_wrap .txt_box .red_txt{
font-size: 3.6rem;
font-weight: 800;
letter-spacing: -.2rem;
line-height: 1;
margin: 0 0 60px;
display:table;
border: 5px solid #0000d9;
padding: 10px 35px;
box-sizing: border-box;
border-radius: 50rem;
}

#thought .section_wrap .txt_box .txt span{
font-size: 2.6rem;
font-weight: 800;
line-height: 1.4;
}

#thought .common_btn_box{
text-align: center;
}


#thought .section_wrap .txt_box  .illust_img{
margin-top: 60px;
}

#thought .section_wrap .img{
width: 45%;
position: relative;
z-index: 2;
}


#thought .section_wrap .img .img1{
width: 82%;
margin: 0 auto　0　0;
border-radius: 30px;
overflow: hidden;
}

#thought .section_wrap .img .img2{
width: 42%;
position: absolute;
top: 52%;
right:0;
border-radius: 30px;
overflow: hidden;
}


#thought article{
width: 100%;
overflow: hidden;
position:relative;
bottom:-20px;
left: 0;
z-index: 1;
}

#thought .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#thought .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 9rem;
font-weight: 700;
letter-spacing: -.5rem;
line-height: 1;
overflow: hidden;
color:#0000d9;
}

#thought .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#thought .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}


#thought .icon1{
position: absolute;
top: 30px;
left: 40px;
z-index: 5;
width: 260px;
}

}