@charset "utf-8";
/* ------------------------------------------------------------  */

#firstview { background: url(../images/index/fv.jpg) center top no-repeat; background-size: cover; padding: 380px 0 100px;}
#firstview .box { width: 1000px; margin: 0 auto;}
#firstview .box div { float: right; width: 475px; color: #fff;}
#firstview .box h2 { font-size: 36px; padding: 0 0 25px; line-height: 56px;}

#about { padding: 0 0 65px;}
#about .img_box { float: left; width: 58%; text-align: right; margin: 50px 0 0; }
#about .img_box img { width: 90%; height: auto;}
#about .box { float: left; width: 42%; padding: 240px 0 220px; background: url(../images/index/bg_07.jpg) right top no-repeat;}
#about .box h3.h3 { margin: 0 0 20px;}
#about .box h3.h3 img.icn { float: left; padding: 0 20px 0 0;}
#about .box h3.h3 span { float: left; font-size: 14px;}
#about .box h3.h3 span img { padding: 0 0 10px;}
#about .box p { line-height: 38px;}

#work { padding: 50px 0 100px; background: url(../images/index/bg_06.jpg) left 85px no-repeat; overflow: hidden;}
#work h3.h3 { text-align: center; margin: 0 0 70px;}
#work h3.h3 img.icn { padding: 0 0 15px;}
#work h3.h3 span img { padding: 0 0 20px;}
#work ul li { float: left; width: 546px; text-align: center; margin: 0 0 85px;}
#work ul li:first-child { margin: 0 8px 0 0;}
#work ul li.second { position: relative;}
#work ul li.second img.fruit { position: absolute; bottom: -80px; right: -150px;}
#work ul li.full { float: none; width: 100%; position: relative;}
#work ul li h4 { font-size: 20px; font-weight: bold; text-align: left; padding: 0 0 20px;}
#work ul li h4 img { padding: 0 20px 0 0;}
#work ul li p { text-align: left; padding: 0 0 15px;}
#work ul li.full img.bg { position: absolute; right: -90px; bottom: 600px; z-index: -1;}
#work ul li.full .youtube{ width: 900px; height: 506px; aspect-ratio: 16/9; margin: 50px auto; float: none; }
#work ul li.full .youtube iframe{ width: 100%; height: 100%; }

#company { background: #1b96cc; padding: 70px 0;}
#company img.photo { float: left; width: 60%; height: auto;}
#company .box { float: right; width: 47%; margin: 5% 0 0 -27%; background: url(../images/index/bg_03.png); padding: 5% 0 5% 8%; box-sizing: border-box; -webkit-box-sizing: border-box;}
#company .box h3.h3 { margin: 0 0 35px;}
#company .box img.icn { float: left; padding: 0 20px 0 0; width: 49px; vertical-align: top;}
#company .box span { float: left; width: 269px;}
#company .box span img { padding: 0 0 10px;}
#company .box p { line-height: 200%;}
#company .box a.btn { border: 1px solid #1b96cc; color: #1b96cc; background: url(../images/index/btn_arw_blue.png) 94% center no-repeat;}

#news{ padding: 100px 0; }
.news-wrapper{ width: 840px; margin: 0 auto; }

#news .h3{ padding: 0 0 15px; text-align: center; }
#news .note{ position: relative; text-align: center; }
#news .note:before{ position: absolute; content: ""; width: 100%; height: 2px; background: #000; top: 50%; left: 50%; translate: -50% -50%; }
#news .note span{ position: relative; padding: 5px 20px; font-size: 18px; text-align: center; background: #fff; font-weight: 600; }

#news ul{ margin: 60px 0 0; padding: 10px 25px; border: 1px solid #000; }
#news ul li a{ display: flex; align-items: center; justify-content: flex-start; padding: 20px 0; border-bottom: 1px solid #000; }
#news ul li:last-of-type a{ border: none; }

#news ul .news-data{ width: 160px; font-size: 14px; letter-spacing: 0.1em; color: #24368a; font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; }
#news ul .news-ttl{ width: calc(100% - 160px); font-size: 14px; }




/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
	
#firstview { background: url(../images/index/fv_sp.jpg) center top no-repeat; background-size: cover; padding: 190px 0 50px;}
#firstview .box { width: 92%; margin: 0 auto;}
#firstview .box div { float: none; width: 100%; color: #fff;}
#firstview .box h2 { font-size: 20px; padding: 0 0 15px; line-height: 36px;}

#about { padding: 0;}
#about .img_box { float: none; width: 92%; text-align: center; margin: 20px 0 0; }
#about .img_box img { width: 100%; height: auto;}
#about .box { float: none; width: 92%; padding: 100px 4% 90px; background: url(../images/index/bg_07.jpg?v=2) right top no-repeat; background-size: 140px auto; text-align: center;}
#about .box h3.h3 { margin: 20px auto 20px; width: 195px;}
#about .box h3.h3 img.icn { float: left; padding: 0 10px 0 0; vertical-align: top; width: 40px; height: auto;}
#about .box h3.h3 span { float: left; font-size: 14px; padding: 5px 0 0;}
#about .box h3.h3 span img { padding: 0 0 10px; height: 30px; width: auto;}
#about .box p { line-height: 38px; text-align: left;}

#work { padding: 0 0 50px; background: url(../images/index/bg_06.jpg) left top no-repeat; overflow: hidden; background-size: 100px auto;}
#work h3.h3 { text-align: center; margin: 0 0 30px;}
#work h3.h3 img.icn { padding: 0 0 15px; width: 40px; height: auto;}
#work h3.h3 span img { padding: 0 0 20px; height: 30px; width: auto;}
#work ul li { float: none; width: 100%; text-align: center; margin: 0 0 45px;}
#work ul li img.photo { width: 100%; height: auto;}
#work ul li:first-child { margin: 0 0 35px;}
#work ul li.second { position: relative;}
#work ul li.second img.fruit { position: absolute; bottom: -130px; right: 0; width: 90px; height: auto; z-index: -2;}
#work ul li.full { float: none; width: 100%; position: relative; margin: 80px 0 0;}
#work ul li h4 { font-size: 16px; font-weight: bold; text-align: left; padding: 0 0 10px;}
#work ul li h4 img { padding: 0 10px 0 0;}
#work ul li p { text-align: left; padding: 0 0 15px;}
#work ul li.full img.bg { position: absolute; right: -40px; bottom: 300px; z-index: -1; width: 100px; height: auto;}
#work ul li.full .btn { margin: 40px 0 0;}
#work ul li.youtube{ width: 100%; height: auto; margin: 50px auto; }
#work ul li.full .youtube{ width: 100%; height: auto; margin: 30px auto 10px;}

#company { padding: 20px 0;}
#company img.photo { float: none; width: 100%; height: auto;}
#company img.photo img { width: 100%; height: auto;}
#company .box { float: none; width: 100%; margin: 0; background: url(../images/index/bg_03.png); padding: 35px 4%; box-sizing: border-box; -webkit-box-sizing: border-box; text-align: center;}
#company .box h3.h3 { margin: 0 auto 25px; width: 260px;}
#company .box img.icn { float: left; padding: 0 10px 0 0; width: 40px; height: auto; vertical-align: top;}
#company .box span { float: left; width: 200px;}
#company .box span img { padding: 5px 0 10px; height: 30px; width: auto;}
#company .box p { line-height: 200%; text-align: left;}
#company .box a.btn { border: 1px solid #1b96cc; color: #1b96cc; background: url(../images/index/btn_arw_blue.png) 94% center no-repeat;}

#news{ padding: 50px 0; }
.news-wrapper{ width: 90%; }

#news .h3 span{ width: 80px; display: inline-block; }
#news .h3 span img{ width: 100%; height: auto; }
#news .note span{ font-size: 16px; }

#news ul{ margin: 30px 0 0; padding: 10px 15px; }
#news ul li a{ padding: 10px 0; }
#news ul .news-data{ width: 90px; font-size: 12px; }
#news ul .news-ttl{ width: calc(100% - 90px); font-size: 12px; }




}