@charset "utf-8";

/*
Theme Name: テーマ
Version 1.0
*/ 

@import "base.css";

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  全般設定
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

body{
	padding:0;
	font-family : "メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic","MS P Gothic",sans-serif, Arial,Helvetica;
	color:#000000;
	-webkit-text-size-adjust: 100%;
}
#wrapper{
	padding:0;
	width:100%;
}

/*　header　
----------------------------------------------------------*/
header .h_inner01{
	width:100%;
	background-color:#ffea1d;
}
header .h_inner01 h1{
	width:1295px;
	font-size:.875rem;
	margin:0 auto;
	padding:.3rem 0;
}
header #menu{
	width:100%;
	height:70px;
	background-color:#ffffff;
}
/*
header #menu ul{
	width:1350px;
	margin:0 auto;
}
*/
header #menu ul{
	width:1500px;
	margin:0 auto;
}

header #menu ul li{
	width:145px;
	height:70px;
	text-align:center;
	float:left;
	line-height:4.2;
	position:relative;
}
header #menu ul li:nth-child(1){
	width:300px;
	text-align:left;
	line-height:3.9;
}
header #menu ul li:nth-child(8){
	width:180px;
	background-color:#ffea1d;
}
header #menu ul li a{
	width:100%;
	height:70px;
	text-align:center;
	float:left;
}
header #menu ul li:nth-child(4) a{
	height:55px;
	line-height:1.4;
	padding-top:15px;
}
header #menu ul li.current{
	background-color:#fffcdd;
}
header #menu ul li a:hover{
	background-color:#fffcdd;
}
header #menu ul li:nth-child(1) a:hover{
	background-color:#ffffff;
}
header #menu ul li .line{
	position:absolute;
	top:0;
	right:-3px;
	z-index:100;
}
header .p_list{
	width:100%;
	background-color:#efefef;
	padding:.3rem 0;	
}
header .p_list p{
	width:1080px;
	font-size:.75rem;
	margin:0 auto;
	padding-left:2rem;
}
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
	border-bottom:1px solid #9a9a9a;
    z-index: 10000;
}

/*　link
----------------------------------------------------------*/
#banner,
#greeting,
#outline,
#voice,
#recruitment,
#no01,
#no02,
#no03{
    margin-top:-70px;
    padding-top:70px;
}

/* IEのみ */
/*
@media all and (-ms-high-contrast: none) {
    #banner,
    #greeting,
    #outline,
    #voice,
    #recruitment,
    #no01,
    #no02,
    #no03{
        margin-top:-140px;
        padding-top:140px;
    }
}
*/

/*　footer　
----------------------------------------------------------*/
footer{
	border-top:3px solid #9a9a9a;
	padding:3rem 0 0;
}
footer .f_inner{
	width:1160px;
	margin:0 auto;
}
footer .f_inner ul li{
	width:46%;
	text-align:center;
	float:left;
}
footer .f_inner ul li:last-child {
	width:8%;
	text-align:center;
	float:left;
}


footer .f_inner ul li p{
	width:100%;
	max-width:360px;
	background-color:#1c1d81;
	color:#ffffff;
    margin:0 auto 1.5rem;
	padding:.3rem 0;
}
footer .f_inner ul li p.tel{
	width:auto;
	background-color:rgba(255,255,255,0);
	margin-bottom:0;
	padding:0;
}

.logo{
	text-align:center;
	margin-top:2rem;
}
.copyright{
	font-size:.75rem;
	text-align:center;
	padding:.5rem 0;
}

#pagetop {
    position: fixed;
    bottom: 80px;
    right: 20px;
}

/*-- PC版表示CSS  --*/
	@media screen and (min-width: 769px){
	.pc_instagram{
		display:block;
	}
	.phone_instagram{
		display:none;
	}
	}

/*-- スマホ版表示CSS  --*/
	@media screen and (max-width: 768px){
		.pc_instagram{
			display:none;
		}
		.phone_instagram{
			display:block;
		}
	}



/*　main　
----------------------------------------------------------*/
a:hover{
	text-decoration:none;	
	filter:alpha(opacity=70); /* IE 6と7*/ 
	-ms-filter: "alpha(opacity=70)"; /* IE 8と9 */ 
	-moz-opacity:0.7; /* Firefox , Netscape */ 
	-khtml-opacity: 0.7; /* Safari 1系 */ 
	opacity:0.7; 
	zoom:1; /*IE*/ 
}

article{
	width:100%;
	padding:2rem 0;
}
article section{
	width:1160px;
	margin:0 auto;
}
article.bg_gray{
	background-color:#ededed;
	padding:2rem 0;
}
article.bg_yellow{
	background-color:#ffea1d;
	padding:2rem 0;
}

.index_ttl01{
	width:100%;
	background-color:#fffcdd;
	text-align:center;
	padding:4rem 0 6rem;
}
.index_ttl01 .ttl{
	width:1160px;
	margin:0 auto;
	position:relative;
}
.index_ttl01 #left{
	position:absolute;
	top:18px;
	right:275px;
}
.index_ttl01 #right{
	position:absolute;
	top:17px;
	left:290px;
}
.ttl01{
	width:100%;
	background-color:#fffcdd;
	text-align:center;
	padding:2.4rem 0;
}
.ttl01 p{
	display:inline-block;
	background-image:url(../img/common/ttl01_left.png) , url(../img/common/ttl01_right.png);
	background-position:left center , right center;
	background-repeat:no-repeat , no-repeat;
	color:#1c1d81;
	font-size:2.4rem;
	font-weight:bold;
	text-align:center;
	padding:0 5rem;
}
.ttl02{
	width:1160px;
	color:#1c1d81;
	font-size:1.75rem;
	display:flex;
	align-items:center;
	margin:0 auto;
	padding:0 0 1rem;
}
.ttl02:before,
.ttl02:after {
	content:"";
	flex-grow:1;
	height:3px;
	background:#1c1d81;
	display:block;
}
.ttl02:before p{
	margin-right:2.5rem;
}
.ttl02:after p{
	margin-left:2.5rem;
}
.ttl02 p{
	width:20rem;
	text-align:center;
}

.ttl03{
	width:1160px;
	background-color:#1c1d81;
	color:#ffffff;
	font-size:1rem;
	text-align:center;
	margin:0 auto 2rem;
	padding:.5rem 0;
}
.ttl04{
	width:96%;
	max-width:1800px;
	background-color:#1c1d81;
	color:#ffffff;
	font-size:1rem;
	text-align:center;
	margin:0 auto 1%;
	padding:.5rem 0;
}


/* 点滅 */
.blinking01{
	-webkit-animation:blink01 1.5s ease-in-out infinite alternate;
    -moz-animation:blink01 1.5s ease-in-out infinite alternate;
    animation:blink01 1.5s ease-in-out infinite alternate;
}
.blinking02{
	-webkit-animation:blink02 1.0s ease-in-out infinite alternate;
    -moz-animation:blink02 1.0s ease-in-out infinite alternate;
    animation:blink02 1.0s ease-in-out infinite alternate;
}
.blinking03{
	-webkit-animation:blink03 2.0s ease-in-out infinite alternate;
    -moz-animation:blink03 2.0s ease-in-out infinite alternate;
    animation:blink03 2.0s ease-in-out infinite alternate;
}
.blinking04{
	-webkit-animation:blink04 1.5s ease-in-out infinite alternate;
    -moz-animation:blink04 1.5s ease-in-out infinite alternate;
    animation:blink04 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink01{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink01{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink01{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-webkit-keyframes blink02{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink02{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink02{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-webkit-keyframes blink03{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink03{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink03{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-webkit-keyframes blink04{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink04{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink04{
    0% {opacity:0;}
    100% {opacity:1;}
}

@keyframes moveimg {
	0% { right:0; top:100px;}
	25% { right:580px; top:350px;}
	50% { right:1160px; top:150px;}
	60% { right:1000px; top:200px;}
	80% { right:580px; top:350px;}
	100% { right:0px; top:100px; }
}
#fly{
	animation: moveimg 60s infinite;
	position: absolute;
	z-index:500;
}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  index.html
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
#top article.support{
	width:100%;
	height:auto;
	background-color:#fffccd;
	text-align:center;
	padding:0;
	position:relative;
	z-index:500;
}
#top article.support section{
	position:relative;
}
#top article.support #blinking01{
	display:none;
	position:absolute;
	top:-80px;
	left:20px;
}
#top article.support #blinking02{
	display:none;
	position:absolute;
	top:-70px;
	left:350px;
}
#top article.support #blinking03{
	display:none;
	position:absolute;
	top:-60px;
	right:350px;
}
#top article.support #blinking04{
	display:none;
	position:absolute;
	top:-70px;
	right:20px;
}

#top article.drone{
	width:100%;
	padding:0;
}
#top article.drone section{
	height:434px;
	background-image:url(../img/index/triangle.png);
	background-position:center top;
	background-repeat:no-repeat;
	background-size:contain;
	position:relative;
}
#top article.drone section .box01{
	font-size:.875rem;
	text-align:center;
}
#top article.drone section .box01 p{
	max-width:480px;
	border-bottom:3px solid #1c1d81;
	margin:0 auto 3rem;
	padding:4rem 0 .8rem;
}

#info .ttl{
	width:96%;
	background-color:#1d1d81;
	color:#ffffff;
	font-size:1.5rem;
	font-weight:bold;
	line-height:1;
	padding:.7rem 2% .5rem;
}
#info ul li{
	border-bottom:1px solid #1d1d81;
	padding:.5rem 2%;
}

#info section{
	position:relative;
}
#info section img.new_icon{
	position:absolute;
	top:-30px;
	right:10px;
	z-index:100;
	max-width:150px;
}
#info .btn{
	width:100%;
	max-width:300px;
	border:1px solid #1d1d81;
	color:#1d1d81;
	text-align:center;
	line-height:3rem;
	margin:1rem 0 0;
	float:right;
}
#info .btn a{
	display:block;
	width:100%;
	height:100%;
	color:#1d1d81;
}


#banner article ul{
	width:100%;
	max-width:1848px;
	margin:0 auto;
}
#banner article ul li{
	width:616px;
	float:left;
}
#banner article ul li img{
	float:left;
	margin:26px;
}

#maker article ul{
	width:96%;
	max-width:1800px;
	margin:0 auto;
}
#maker article ul li{
    width:12.2%;
	float:left;
	text-align:center;
	margin:1%;
}

#banner article ul li.b02 a.chirashi,
#banner article ul li.b02 a.event{
	position:relative;
	display:block;
	float:left;
}
#banner article ul li.b02 a.chirashi img,
#banner article ul li.b02 a.event img{
	float:none;
}

#banner article ul li.b02 img.new_icon{
	position:absolute;
	top:-10px;
	right:0px;
	z-index:100;
}

.buruburu {
    -webkit-animation:buruburu 0.1s infinite linear alternate;
    animation:buruburu 0.1s infinite linear alternate;
}

@-webkit-keyframes buruburu {
    0% {-webkit-transform:translate(0, 0) rotate(-3deg);}
    50% {-webkit-transform:translate(0, -1px) rotate(0deg);}
    100% {-webkit-transform:translate(0, 0)rotate(3deg);}
}

@keyframes buruburu {
    0% {transform:translate(0, 0) rotate(-3deg);}
    50% {transform:translate(0, -1px) rotate(0deg);}
    100% {transform:translate(0, 0)rotate(3deg);}
}

.fadein
,fadein_top{
  opacity : 0;
  transform: translateY(20px);
  transition: all 2s;
}

@keyframes top_down {
	0% {  top:-80px;}
	50% { top:0;}
	100% { top:-80px; }
}
#ugoku{
	animation: top_down 2s infinite;
	position: absolute;
	z-index:500;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  shop.html
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
#tsushima article,
#hashima article,
#kanie article{
	padding-top:2rem;
}
#tsushima article ul,
#hashima article ul,
#kanie article ul{
	width:1160px;
	margin:0 auto 2rem;
}
#tsushima article ul li,
#hashima article ul li,
#kanie article ul li{
	line-height:2;
	float:left;
}
#tsushima article ul li:nth-child(1),
#hashima article ul li:nth-child(1),
#kanie article ul li:nth-child(1){
	margin-right:2rem;
}
#tsushima article.bg_gray ul,
#hashima article.bg_gray ul,
#kanie article.bg_gray ul{
	width:100%;
	max-width:1350px;
	margin:0 auto;
}
#tsushima article.bg_gray ul li,
#hashima article.bg_gray ul li,
#kanie article.bg_gray ul li{
	width:32.5%;
	line-height:2;
	float:left;
}
#tsushima article.bg_gray ul li:nth-child(1),
#tsushima article.bg_gray ul li:nth-child(2),
#hashima article.bg_gray ul li:nth-child(1),
#hashima article.bg_gray ul li:nth-child(2),
#kanie article.bg_gray ul li:nth-child(1),
#kanie article.bg_gray ul li:nth-child(2){
	margin-right:1.2%;
}

#tsushima article.img05 ul,
#hashima article.img05 ul,
#kanie article.img05 ul{
	width:100%;
	max-width:1920px;
	margin:0 auto;
}
#tsushima article.img05 ul li,
#hashima article.img05 ul li,
#kanie article.img05 ul li{
	width:19.5%;
	line-height:2;
	float:left;
	margin-right:.5%;
}
#tsushima article.img05 ul li:nth-child(5),
#hashima article.img05 ul li:nth-child(5),
#kanie article.img05 ul li:nth-child(5){
	margin-right:0;
}
#tsushima article.img05 ul li p{
	width:100%;
	max-width:190px;
	background-color:#1c1d81;
	color:#ffffff;
	font-size:.9rem;
	text-align:center;
	margin:1rem auto 0;
	padding:.2rem 0;
}

article#map{
	height:435px;
	padding-top:0;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  company.html
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
#greeting article{
	background-image:url(../img/company/greeting_bg.png);
	background-position:center top;
	background-repeat:no-repeat;
}
#greeting article .box01{
	max-width:1050px;
	margin:0 auto;
}
#greeting article .box01 img{
	float:left;
}
#greeting article .box01 .txt01{
	width:690px;
	line-height:2;
	float:right;
}
#greeting article .box01 .txt01 p{
	text-align:right;
	margin-top:.5rem;
}
#greeting article .box01 .txt01 p img{
	float:none;
}

#outline{
	text-align:center;
}
#outline table{
	width:850px;
    border-spacing:0 1rem;
    border-collapse: separate;
	margin:1rem auto 0;
}
#outline table th,
#outline table td{
	margin-bottom:1rem;
	padding:.7rem 2.5rem;
}
#outline table th{
	width:160px;
	background-color:#1c1d81;
	color:#ffffff;
	font-size:1.125rem;
	text-align:center;
}
#outline table td{
	border-top:1px solid #efefef;
	border-bottom:1px solid #efefef;
	border-right:1px solid #efefef;
	font-size:1rem;
	text-align:left;
}
#outline table td a{
	text-decoration:underline;
}
#history01 article{
	background-image:url(../img/company/history01_bg.png);
	background-position:center bottom;
	background-repeat:no-repeat;
}
#history01 table{
	width:700px;
	margin:1.5rem auto 2rem;
}
#history01 table th,
#history01 table td{
    font-size:1rem;
	padding:.3rem 0;
}
#history01 table th{
	width:280px;
}

#history02{
	text-align:center;
}
#history02 .txt01{
	width:850px;
	text-align:left;
	margin:2rem auto 1rem;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  recruit.html
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
#recruit01 article ul li img,
#voice article ul li img{
	width:100%;
}

#recruit01{
	text-align:center;
}

#recruit01 article ul,
#voice article ul{
	width:100%;
	max-width:1920px;
	margin:2rem auto 0;
}

#recruit01 article ul li{
	width:32.5%;
	float:left;
}
#recruit01 article ul li:nth-child(1),
#recruit01 article ul li:nth-child(2){
	margin-right:1.2%;
}
#recruit01 article ul li p{
	color:#1c1d81;
	font-size:1.375rem;
	margin:1rem 0;
}

#voice article ul li{
	width:32.5%;
	float:left;
}
#voice article ul li:nth-child(1),
#voice article ul li:nth-child(2){
	margin-right:1%;
}
#voice article ul li .box01{
	width:92%;
	padding:4%;
}
#voice article ul li .box02{
	width:300px;
	background-color:#ffffff;
	font-size:1.25rem;
	text-align:center;
	margin:2rem auto 0;
	padding:.5rem 0;
}
#voice article ul li .box01 .txt01{
	font-size:1.375rem;
	margin-bottom:.7rem;
}
#voice article ul li .box01 .txt01 p{
	display:inline-block;
	width:6rem;
	background-color:#1c1d81;
	color:#ffffff;
	font-size:1.25rem;
	text-align:center;
    margin-right:1.5rem;
	padding:.1rem 0;
}

#recruitment table{
	width:1000px;
	margin:1rem auto 2rem;
}
#recruitment table th,
#recruitment table td{
	border-bottom:1rem solid #efefef;
	font-size:1.25rem;
	padding:.7rem 2.5rem;
}
#recruitment table th{
	width:160px;
	background-color:#1c1d81;
	color:#ffffff;
	font-weight:bold;
}
#recruitment table td{
	background-color:#ffffff;
}

.entry_btn{
	width:20rem;
	background-color:#ff8000;
	color:#ffffff;
	font-size:1.25rem;
	font-weight:bold;
	text-align:center;
	margin:0 auto 4rem;
	padding:1rem 0;
}

/************************************
** CSSでタブ表示
************************************/
/* タブの外枠 */
.tabs{
    width:1000px;
	margin:0 auto;
    margin-top:2rem;
}
 
/* タブのスタイル */
.tabs .tab-label01,
.tabs .tab-label02,
.tabs .tab-label03{
    display: inline-block;
	width:316px;
	background-color:#72af2d;
	color:#ffffff;
	font-size:1.25rem;
	font-weight:bold;
	text-align:center;
	margin-bottom:1.5rem;
    margin-right:20px;
	padding:.5rem 0;
}
.tabs .tab-label03{
	margin-right:0;
}
 
/* タブにマウスカーソルがのったときフッター */
.tabs .tab-label:hover {
  opacity: 0.7;
}
 
/* ラジオボタンと内容を非表示 */
.tabs input[name="tab-radio"],
.tabs .tab-content {
  display: none;
}
 
/* タブ内容のスタイル */
.tabs .tab-content{
	width:1000px;
    min-height: 200px;
	margin:0 auto;
}
 
/* 選択されているタブのコンテンツのみを表示 */
.tabs #tab-1:checked ~ .tab-1-content,
.tabs #tab-2:checked ~ .tab-2-content,
.tabs #tab-3:checked ~ .tab-3-content,
.tabs #tab-4:checked ~ .tab-4-content,
.tabs #tab-5:checked ~ .tab-5-content {
  display: block;
}
 
/* 選択されているタブのスタイルを変える */
.tabs input[name="tab-radio"]:checked + .tab-label {
  background-color: #fff;
}

/*　voice
----------------------------------------------------------*/
#no01 article.bg_yellow ul,
#no02 article.bg_yellow ul,
#no03 article.bg_yellow ul{
	width:1000px;
	margin:0 auto;
}
#no01 article.bg_yellow ul li,
#no02 article.bg_yellow ul li,
#no03 article.bg_yellow ul li{
	width:45%;
	float:left;
}
#no01 article.bg_yellow ul li .txt01,
#no02 article.bg_yellow ul li .txt01,
#no03 article.bg_yellow ul li .txt01{
	width:100%;
	font-size:1.25rem;
}
#no01 article.bg_yellow ul li .txt01 p,
#no02 article.bg_yellow ul li .txt01 p,
#no03 article.bg_yellow ul li .txt01 p{
	display:inline-block;
	width:100%;
	max-width:100px;
	background-color:#1c1d81;
	color:#ffffff;
	text-align:center;
	margin:.3rem 1rem .3rem 0;
	padding:.5rem 0;
}
#no01 article.bg_yellow ul li:nth-child(1),
#no02 article.bg_yellow ul li:nth-child(1),
#no03 article.bg_yellow ul li:nth-child(1){
	width:50%;
	margin-right:5%;
}
#no01 article.bg_yellow ul li:nth-child(2),
#no02 article.bg_yellow ul li:nth-child(2),
#no03 article.bg_yellow ul li:nth-child(2){
	padding-top:6rem;
}

#tsushima article.bg_gray ul,
#hashima article.bg_gray ul,
#kanie article.bg_gray ul{
	width:100%;
	max-width:1350px;
	margin:0 auto;
}
#tsushima article.bg_gray ul li,
#hashima article.bg_gray ul li,
#kanie article.bg_gray ul li{
	width:32.5%;
	line-height:2;
	float:left;
}
#tsushima article.bg_gray ul li:nth-child(1),
#tsushima article.bg_gray ul li:nth-child(2),
#hashima article.bg_gray ul li:nth-child(1),
#hashima article.bg_gray ul li:nth-child(2),
#kanie article.bg_gray ul li:nth-child(1),
#kanie article.bg_gray ul li:nth-child(2){
	margin-right:1.2%;
}

article.qanda{
	width:100%;
	background-color:#fffcdd;
	margin:0 auto;
	padding:0;
	margin-bottom:2rem;
}
article.qanda ul{
	max-width:1920px;
	margin:0 auto;
}
article.qanda ul li:nth-child(1){
	width:45%;
	float:left;
}
article.qanda ul li:nth-child(2){
	width:55%;
	float:left;
}
article.qanda ul li .box01{
	width:83%;
	padding:5% 12% 0 5%;
}
article.qanda ul li .box01 p.question{
	border-bottom:1px solid #1c1d81;
	font-size:1.25rem;
	font-weight:bold;
	color:#1c1d81;
	padding:.5rem 2rem;
}
article.qanda ul li .box01 p.answer{
	font-size:1.3rem;
	padding:1rem 2rem;
	margin-bottom:1rem;
}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  contact.html
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
#tel article section,
#mail article section{
	text-align:center;
}
#mail article section p{
	text-align:right;
}
#mail article section p a{
	text-decoration:underline;
}
#tel article{
	background-image:url(../img/contact/tel_bg.png);
	background-position:center top;
	background-repeat:no-repeat;
}

#mail table{
	width:900px;
    border-spacing:0 1rem;
    border-collapse: separate;
	margin:2rem auto;
}
#mail table th,
#mail table td{
	margin-bottom:1rem;
	vertical-align:top;
	padding:.5rem 1rem .5rem 0;
}
#mail table th{
	width:225px;
	font-size:1.125rem;
}
#mail table th p{
	display:none;
}
#mail table td{
	font-size:1.125rem;
	padding:0;
}
#mail table th .necessary{
	display:inline-block;
	width:3rem;
	background-color:#1c1d81;
	border-radius:5px;
	color:#ffffff;
	font-size:.875rem;
	text-align:center;
	float:right;
	padding:.2rem 0;	
}
#mail table td .input_txt01{
	width:100%;
	height:2rem;
	border:1px solid #666666;
	font-size:1.125rem;
	padding:.3rem .5rem;
}
#mail table td .input_txt02{
	width:50%;
	height:2rem;
	border:1px solid #666666;
	font-size:1.125rem;
	padding:.3rem .5rem;
}
#mail table td .area_txt01{
	width:100%;
	height:10rem;
	border:1px solid #666666;
	font-size:1.125rem;
	padding:.3rem .5rem;
}
.btn{
	text-align:center;
}
.contact_btn{
	width:240px;
	height:60px;
	background-color:#de801e;
	border-radius:10px;
	color:#ffffff;
	font-size:18px;
	text-align:center;
	margin:0 auto 2rem;
	padding:16px 0;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  solution.html
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
#main.solution,
#main.blog,
#main.single{
	width:1050px;
	margin:0 auto;
}

#sidebar{
	width:235px;
	float:left;
	padding:2rem 0;
}
#sidebar .box01{
	margin-bottom:2rem;
}
#sidebar .box01 .title{
	width:100%;
	height:1.2rem;
	background-color:#fffcdd;
	border-bottom:.4rem solid #ffea1d;
	font-size:1.1rem;
	text-align:center;
	margin-bottom:1rem;
	padding:.7rem 3% .5rem;
}
#sidebar .box01 ul{
	padding-left:.5rem;
}
#sidebar .box01 ul li{
	margin:.5rem 0;
}

#contents{
	width:765px;
	float:right;
	padding:2rem 0;
}
#contents .box01 .title{
	width:94%;
	height:1.2rem;
	background-color:#fffcdd;
	border-bottom:.4rem solid #ffea1d;
	font-size:1.1rem;
	padding:.7rem 3% .5rem;
}
#contents .box01 ul{
	margin:1.5rem 0 3rem;
	
}
#contents .box01 ul.ichiran li:nth-child(1){
	width:240px;
	float:left;
	margin-right:50px;
}
#contents .box01 ul.ichiran li:nth-child(1) p{
	margin-bottom:1rem;
}
/*
#contents .box01 ul.ichiran li:nth-child(1) img{
	border:1px solid #666666;
}
*/
#contents .box01 ul.ichiran li:nth-child(2){
	width:460px;
	float:left;
}
#contents .box01 ul.ichiran li ul.cat{
	width:100%;
	margin:0;
}
#contents .box01 ul.ichiran li ul.cat li,
.singular #contents .box01 ul.cat li{
	width:auto;
	background-color:#1c1d81;
	border-radius:5px;
	color:#ffffff;
	font-size:.875rem;
	text-align:left;
	margin-bottom:.5rem;
	padding:.2rem 1rem;
	float:left;
}
#contents .box01 ul li ul.cat li:nth-child(1),
#contents .box01 ul li ul.cat li:nth-child(2){
	width:auto;
}
#contents .box01 ul li ul.cat li a,
.singular #contents .box01 ul.cat li a{
	color:#ffffff;
}
#contents .box01 ul li ul li:nth-child(n){
	margin-right:.5rem;
}
#contents .box01 ul li .txt01{
	margin:.5rem 0 1rem;
	height:190px;
	overflow:hidden;
}
#contents .box01 ul li .contents_all{
	text-align:right;
}

#main.singular{
	width:100%;
	max-width:1050px;
	margin:0 auto;
}
#main.singular #contents{
	width:100%;
	max-width:1050px;
	padding:3rem 0;
}
.singular #contents .box01 ul.cat{
	margin-bottom:1rem;
}
.singular #contents .box01 ul.cat li{
	margin-right:.5rem;
}
.singular #contents .box01 .title{
	width:100%;
	height:2rem;
	background-color:transparent;
	border-bottom:0;
	font-size:1.5rem;
	font-weight:bold;
	padding:0;
}
.singular #contents .box01 ul.image03{
	width:100%;
	margin-bottom:0;
}
.singular #contents .box01 ul.image03 li{
	width:100%;
	max-width:300px;
	float:left;
	margin-right:1rem;
	margin-bottom:1rem;
}
/*
.singular #contents .box01 ul.image03 li img{
	border:1px solid #666666;
}
*/
.singular #contents .box01 .txt01{
	width:100%;
	margin-bottom:2rem;
}

.blog #contents .title{
	width:94%;
	height:1.2rem;
	background-color:#fffcdd;
	border-bottom:.4rem solid #ffea1d;
	font-size:1.1rem;
	padding:.7rem 3% .5rem;
	margin-bottom:1rem;
}
.blog #contents .title p{
	display:inline-block;
	width:140px;
}
.blog #contents .box01 .txt01{
	margin:0 0 2rem;
	padding:0 3%;
}

.single #contents .box01 .title{
	width:100%;
	height:2rem;
	background-color:transparent;
	border-bottom:0;
	font-size:1.5rem;
	font-weight:bold;
	padding:0;
}
.single #contents .box01 .date{
	text-align:right;
}
.single #contents .box01 .txt01{
	margin:1rem 0;
}


/*　トリミングする外側の枠　*/
.solution .trim img{
    overflow: hidden;
    width: 240px;/* トリミングしたい枠の幅 */
    height: 240px;/* トリミングしたい枠の高さ */
    object-fit: cover; /* この一行を追加するだけ！ */
}
/*　トリミングする外側の枠　*/
.singular .trim img{
    overflow: hidden;
    width: 300px;/* トリミングしたい枠の幅 */
    height: 300px;/* トリミングしたい枠の高さ */
    object-fit: cover; /* この一行を追加するだけ！ */
}



/* ページナビ */
.navigation {
  text-align: center;
  padding: 1em 0;
  width: 100%;
}
.navigation a{
  color:#604c3f;
}
#contents .navitop {
  float:left;
  width:14%;
  text-align:center;
}
#contents .navileft {
  float:left;
  width:43%;
  text-align:left;
  word-break:break-all;
  line-height:1.5em;
}
#contents .naviright {
  float:right;
  width:43%;
  text-align:right;
  word-break:break-all;
  line-height:1.5em;
}


.pc_1350{
    display:block;
}	
.sp_1350{
    display:none;
}
.pc_640{
    display:block;
}	
.sp_640{
    display:none;
}
img{
	max-width:100%;
	height:auto;
}

@media screen and (min-width:641px){
    body{
	    font-size:16px;
    }

}

@media screen and (max-width:1865px){
	
    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      index.html
    　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

    #banner article ul{
		width:100%;
	}
    #banner article ul li{
		width:31%;
		margin:1%;
	}
    #banner article ul li img{
		margin:2%;
	}	
    #banner article ul li img.img22{
		width:96%;
	}	
    #banner article ul li img.img12{
		width:44%;
	}
    #banner article ul li img.img21{
		width:96%;
	}
	#banner article ul li.b02 a.chirashi,
    #banner article ul li.b02 a.event{
		width:46%;
		margin:1.5% 2%;
    }
    #banner article ul li.b02 a img.new_icon{
		width:50%;
	}
    #banner article ul li img.img11{
		width:100%;
	}
    #banner article ul li.img01 img.img11{
		width:46%;
	}
	
}

@media screen and (max-width:1350px){
    .pc_1350{
	    display:none;
    }	
    .sp_1350{
	    display:block;
    }
	.h_inner{
		width:100%;
		height:60px;
		position:fixed;
		z-index:1000;
	}
	.sp_logo{
		position:absolute;
		top:10px;
		left:10px;
		z-index:1000;
	}
	.sp_logo img{
		height:40px;
	}
	
	#main.top_main{
		padding-top:60px;
	}
    .index_ttl01{
	    padding:134px 0 5rem;
    }
    .index_ttl01 .ttl{
	    width:100%;
	}
    .ttl01{
	    padding:108px 0 2.4rem;
    }

    /*　link
    ----------------------------------------------------------*/
    #greeting,
	#outline,
	#tsushima,
	#hashima,
	#kanie,
    #voice,
    #recruitment,
	#no01,
	#no02,
	#no03,
	#banner{
	    margin-top:-60px;
	    padding-top:60px;
    }

}

@media screen and (max-width:1159px){

    /*　header
    ----------------------------------------------------------*/
	header .p_list p{
	    width:90%;
	}

    /*　footer
    ----------------------------------------------------------*/
    footer{
	    padding:3rem 2rem 0;
    }
    footer .f_inner{
	    width:100%;
    }

    footer .f_inner .box03{
 	    width:30%;
    }

    /*　main　
    ----------------------------------------------------------*/
	#main article{
		width:90%;
		padding-left:5%;
		padding-right:5%;
	}
	article section{
	    width:100%;
	}
	.ttl02{
	    width:100%;
	}
	.ttl02 p{
	    width:15rem;
	}
    .ttl03{
	    width:100%;
    }
	
    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      index.html
    　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/	
	#top article.drone section{
		height:auto;
		width:90%;
		padding:0 5%;
    }
	#top article.drone section .box01{
	    width:90%;
		margin:0 auto;
		text-align:left;
	}
	#top article.drone section .box01 p{
		width:90%;
		text-align:center;
		margin:0 auto 3rem;
		padding:3rem 0 .8rem;
	}

    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      shop.html
    　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
    #tsushima article ul,
    #hashima article ul,
    #kanie article ul{
	    width:100%;
	    margin-bottom:0;
    }
    #tsushima article.bg_gray ul,
    #hashima article.bg_gray ul,
    #kanie article.bg_gray ul{
	    width:100%;
	    margin:0 auto;
	    text-align:center;
    }
    #tsushima article ul li,
    #hashima article ul li,
    #kanie article ul li{
	    width:48%;
	    line-height:normal;
    }
    #tsushima article ul li:nth-child(1),
    #hashima article ul li:nth-child(1),
    #kanie article ul li:nth-child(1){
	    margin-bottom:1rem;
	    margin-right:1rem;
    }
    #tsushima article.img05 ul li:nth-child(1){
	    margin-bottom:1rem;
	    margin-right:.5%;
    }


    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      company.html
    　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	#greeting article{
    	background-image:none;
	}

	#greeting article .box01{
	    width:100%;
		margin-bottom:1rem;
    }
    #greeting article .box01 img{
		width:30%;
		margin-bottom:1.5%;
		margin-right:1.5%;
    }
    #greeting article .box01 .txt01{
	    width:100%;
		line-height:normal;
		text-align:left;
		float:none;
		margin-top:.5rem;
    }
	#greeting article .box01 .txt01 p img{
		width:50%;
	}


    #outline table{
	    width:100%;
		border-spacing:0;
		margin:1rem auto 2rem;
	}
	#outline table th,
	#outline table td{
		width:96%;
		text-align:left;
		float:left;
		margin-bottom:0;
		padding:2% 1.5%;
	}
	#outline table td{
		border-right:none;
	}
	
	#history01 article{
	    background-image:none;
    }
    #history01 table{
	    width:100%;
		margin:1rem auto 3rem;
    }
    #history01 table th,
    #history01 table td{
		width:96%;
		border-bottom:1px solid #efefef;
		text-align:left;
		float:left;
	    padding:2% 1.5%;
    }
    #history01 table th{
	    background-color:#1c1d81;
		color:#ffffff;	
	}

    #history02 .txt01{
	    width:100%;
		margin:1rem auto 2rem;
	}
	
    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      recruit.html
　    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
    #voice article ul li .box01{
	    margin-top:.5rem;
    }
    #voice article ul li .box01 .txt01{
	    padding-left:0;
    }
    #voice article ul li .box01 .txt01 p{
	    display:block;
	    margin-bottom:.5rem;
        margin-right:0;
    }
    #voice article ul li .box02{
	    width:90%;
	    padding:2% 5%;
    }
    #voice article ul li .box02 p.answer{
	    width:100%;
    }
		
    /* タブの外枠 */
    .tabs{
	    width:100%;
    }
	/* タブのスタイル */
	.tabs .tab-label01,
	.tabs .tab-label02,
	.tabs .tab-label03{
		width:100%;
	}
	/* タブ内容のスタイル */
    .tabs .tab-content{
	    width:100%;
    }
		
	#recruitment table{
	    width:100%;
	    margin:1rem auto 2rem;
    }
    #recruitment table th,
    #recruitment table td{
	    width:96%;
	    padding:2% 1.5%;
	    float:left;
    }

    /*　voice
    ----------------------------------------------------------*/
	#no01 article.bg_yellow ul,
	#no02 article.bg_yellow ul,
	#no03 article.bg_yellow ul{
		width:100%;
	}
    article.qanda ul li .box01{
	    width:90%;
	    padding:5%;
    }

    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      contact.html
　    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
    #tel .ttl02,
	#mail .ttl02{
		font-size:1.2rem;
	}
    #mail table{
	    width:100%;
        border-spacing:0;
	    margin:2rem auto;
    }
    #mail table th,
    #mail table td{
	    margin-bottom:0;
	    width:96%;
	    float:left;
    }
    #mail table th p{
		display:inline-block;
	}
    #mail table td .input_txt02{
	    width:100%;
    }
	
    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      solution.html
　    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

    #main.solution,
	#main.singular,
	#main.blog,
	#main.single{
	    width:765px;
		margin:0 auto;
    }

    #sidebar{
	    width:235px;
	    float:none;
		padding:0 0 2rem;
	}
    #contents{
	    width:765px;
		float:none;
    }


}

@media screen and (max-width:980px){
	
    /*　footer
    ----------------------------------------------------------*/
    footer{
	    padding:3rem 2rem 0;
    }
    footer .f_inner{
	    width:100%;
    }
	footer .f_inner ul li{
	    width:100%;
		margin-bottom:1rem;
		margin-right:0;
		float:none;
    }	
	
	#maker article ul li{
        width:18%;
    }
		
    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      recruit.html
    　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/	
	/*　voice
    ----------------------------------------------------------*/
	#no01 article.bg_yellow ul li,
	#no02 article.bg_yellow ul li,
	#no03 article.bg_yellow ul li{
		float:none;
	}
	#no01 article.bg_yellow ul li:nth-child(1),
	#no02 article.bg_yellow ul li:nth-child(1),
	#no03 article.bg_yellow ul li:nth-child(1){
		width:100%;
		margin-right:0;
	}
	#no01 article.bg_yellow ul li:nth-child(2),
	#no02 article.bg_yellow ul li:nth-child(2),
	#no03 article.bg_yellow ul li:nth-child(2){
		width:100%;
		padding-top:0;
	}
    #no01 article.bg_yellow ul li .txt01,
	#no02 article.bg_yellow ul li .txt01,
	#no03 article.bg_yellow ul li .txt01{
		font-size:1rem;
	}

	article.qanda ul li{
		float:none;
	}
	article.qanda ul li:nth-child(1),
	article.qanda ul li:nth-child(2){
		width:100%;
	}
	article.qanda ul li:nth-child(1) img{
		display:none;
	}
	article.qanda ul li .box01 p.question{
		padding:.5rem 0;
	}
	article.qanda ul li .box01 p.answer{
    	padding:1rem 0;
    }
	

	
}

@media screen and (max-width:800px){
	
	
    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      recruit.html
　    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
    #voice article ul li{
	    width:100%;
	    margin-bottom:2rem;
    }
    #voice article ul li .box01 .txt01 p{
	    display:inline-block;
        margin-right:1.5rem;
	    margin-bottom:0;
    }

    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      solution.html
　    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
    #main.solution,
	#main.singular,
	#main.blog,
	#main.single{
	    width:90%;
		margin:0 auto;
    }

    #sidebar{
	    width:100%;
	}
    #sidebar .box01 .title{
		width:94%;
	}
    #contents{
	    width:100%;
    }
	#contents .box01 ul.ichiran{
        margin-bottom:1.5rem;
    }
	#contents .box01 ul.ichiran li:nth-child(1){
	    width:100%;
	    float:none;
	    margin-right:0;
    }
	#contents .box01 ul.ichiran li:nth-child(2){
	    width:100%;
	    float:none;
    }
    #contents .box01 ul.ichiran li ul.cat{
	    width:100%;
		margin-top:1rem;
    }
	#contents .box01 ul.ichiran li ul.cat li{
		margin-bottom:.5rem;
		margin-right:.5rem;
	}

    #contents .box01 ul li .txt01{
		height:auto;
		overflow:auto;
	}
	.blog #contents .title p{
		display:block;
	}
	#contents .box01 .title{
		height:auto;
	}
	.single #contents .box01 .title{
		height:auto;
	}

	
	
}

@media screen and (max-width:640px){

    .pc_640{
	    display:none;
    }	
    .sp_640{
	    display:block;
    }

    body{
        font-size:14px;
	}

    /*　footer
    ----------------------------------------------------------*/
    .copyright{
	    font-size:.5rem;
    }

    /*　main
    ----------------------------------------------------------*/
	article{
	    padding:1.5rem 0 0;
    }
	.index_ttl01{
 	    width:94%;
    	padding:98px 3% 2rem;
    }
    .ttl01{
	    width:96%;
	    padding:103px 2% 2.4rem;
    }
    .ttl01 p{
	    font-size:2em;
	    padding:0 3rem;
    }

    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      index.html
    　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
    #banner article ul li{
        width:48%;
    }
    #banner article ul li img.img21{
	    margin-bottom:5%;
    }
	
	#info .ttl{
		font-size:1rem;
	}
    #info section img.new_icon{
		width:25%;
		top:-20px;
	}
	
    #maker article ul li{
        width:23%;
    }
		
    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      recruit.html
　    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/	
	#voice article ul li .box01 .txt01,
	#voice article ul li .box01 .txt01 p,
	#voice article ul li .box02 p.question,
	#recruitment table th, 
	#recruitment table td{
		font-size:1.1rem;
	}

    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      shop.html
    　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
    #tsushima article ul li,
    #hashima article ul li,
    #kanie article ul li{
	    width:100%;
	    float:none;
    }
    #tsushima article ul li:nth-child(1),
    #hashima article ul li:nth-child(1),
    #kanie article ul li:nth-child(1){
	    margin-right:0;
    }

    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      solution.html
    　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
    #sidebar .box01 .title{
    	height:1rem;
	    padding:.5rem 3%;
    }
    #contents .box01 .title{
	    height:auto;
	    padding:.5rem 3%;
    }
    #main.singular #contents{
		width:90%;
	    padding:3rem 5%;
    }
	#contents .box01 ul{
		margin-bottom:0;
	}
	
    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      チラシ　ポップアップしない
    　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/	
	.single #contents .box01 .txt01 a{
		pointer-events:none;
	}


}

@media screen and (max-width:320px){
	
    /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      index.html
    　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
    #banner article ul{
		width:100%;
	}
    #banner article ul li{
		width:90%;
		margin:5%;
		float:none;
	}	
    #banner article ul li img.img22{
		width:96%;
	}	
    #banner article ul li img.img12{
		width:46%;
	}
    #banner article ul li img.img21{
		width:96%;
	}
	#banner article ul li.b02 a.chirashi,
    #banner article ul li.b02 a.event{
		width:46%;
    }
    #banner article ul li img.img11{
		width:100%;
	}
    #maker article ul li{
        width:48%;
    }

	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      company.html
    　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	#greeting article .box01{
		text-align:center;
	}
	#greeting article .box01 img{
		width:70%;
		float:none;
		margin-bottom:1.5%;
		margin-right:0;
	}
    #greeting article .box01 .txt01{
	    width:100%;
		line-height:normal;
		text-align:left;
		float:none;
		margin-top:.5rem;
    }
	#greeting article .box01 .txt01 p img{
		width:70%;
	}
	
}