@charset "UTF-8";

/*　↓↓↓共通指定↓↓↓　*/
* {
	box-sizing: border-box;
	text-decoration: none;
}
body {
	margin: 0;
}
h1 {
	font-size: 3em;
	text-align: center;
}
h2 {
	font-size: 2em;
}
p {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
img {
	max-width: 100%;
}
/*　↓↓↓トップページ↓↓↓　*/
#top {
	margin: 0px 0 0 0;
	position: fixed;
	top: 0;
	display: flex;
	background: rgb(48, 48, 48);
	color: rgb(255, 255, 255);
	gap: 50px;
	justify-content: space-between;
	align-items: center;
	padding: 0 50px;
}
.top-item1 {
	flex: 1 1 7%;
	padding: 10px 0 0;
}
.top-item2 {
	flex: 1 1 23%;
	text-align: left;
}
.top-item3 {
	flex: 1 1 70%;
}
.nav-toggle {
	display: none;
}
.nav-list {
	display: none;
}
/*.top-item4 {
	flex: 0 0 10%;
	background: rgb(255, 123, 0);
	color: white;
	font-size: 1em;
	padding: 0px 10px;
	text-align: center;
	border-radius: 5px;
	margin: 15px 0px;
}*/
.cn {font-size: 1.5em;}
.wrapper {
	max-width: 1200px;
	margin: 0 auto;
}
.menu {
	padding-top: 0px;
	color: rgb(255, 255, 255);
}
.menu ul {
	display: flex;
	font-size: 1.2em;
	justify-content: center;
}
.menu li {
	margin: 0px 30px 0px;
}
.menu a:link {
	color: rgb(90, 2, 255);
}
.menu a:visited {
	color: rgb(255, 123, 0);
}
.menu a:hover {
	color: rgb(168, 104, 43);
}
.menu a:active {
	color: #b20202;
}
#main {
	width: 80%;
	margin: 100px auto 50px auto;
	background-color: rgb(48, 48, 48);
	padding: 0;
}
.main-photo-row {
	padding-top: 10px;
	margin: 10px;
	display: flex;
	gap:10px;
}
.main-photo-col1 {
	flex: 0 1 27.4%;
}
.main-photo-col2 {
	flex: 0 1 17.6%; 
}
.main-photo-col3 {
	flex: 0 1 55.5%;
}
main-photo {display: flex;} /*エラー対策行*/
.act {
	color: aliceblue;
	background-color: rgb(255, 123, 0);
	padding: 0 15px;
}
#container {
	width: 80%;
	color:rgb(255, 255, 255);
	background-image: url(../images/mi02.png) ;
	background-size: contain;
	background-repeat: no-repeat;
	margin: 0px auto 50px auto;
	padding: 20px 0 20px;
	background-color: rgb(236, 233, 233);
}
.shadow {
	text-shadow:  4px 4px 10px #242323, -4px 4px 10px #242323, 4px -4px 10px #242323, -4px -4px 10px #242323;
}
.cont-wrap {
	width: 90%;
	display: grid ;
	row-gap: 50px;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	margin: 350px auto 0 auto;
}
.cont-item {
	color: rgb(255, 123, 0);
	text-align: center;
	align-items: center;
}
.cont-item p {
	font-size: 1.3em;
}
.cont-item1,.cont-item4,.cont-item5 {
	background: rgb(233, 232, 231);
}
.cont-item1 {
	box-shadow: -6px -6px 10px 11px rgb(233, 232, 231);
}
.cont-item2 {
	box-shadow: 7px -6px 10px 10px rgb(233, 232, 231);
}
.button {
	background: rgb(255, 123, 0);
	color: white;
	padding: 20px 40px;
	align-items:center;
	text-align: center;
	border-radius: 5px;
	margin: 20px 0px;
	line-height: 5em;
	font-size: 1.3em;
}

/*　↓↓↓車両マーキングページ↓↓↓　*/
#wrap-photo {
	background-image: url(../images/wrap01.jpeg);
	background-size: cover;
	background-repeat: no-repeat;
	margin: 100px auto 0;
	width: 80%;
	height: 500px;
	padding: 150px;
	color: rgb(255, 255, 255);
}
#wrapping {
	width: 90%;
	text-align: center;
	margin: 0 auto;
}
.wa-title {
	text-align: center;
	font-size: 1.5em;
}
.wa-cont {
	width: 80%;
	background: rgb(248, 209, 183);
	text-align: center;
	margin: 100px auto 0 auto;
	padding: 5px 100px 20px 100px;
}
.wa-list {
	text-align: left;
}
.wa-list  h2::before {  /*疑似クラスでdtに・を着ける*/
	content: "・"
}
.wa-list dd {
	font-size: 1.5em;
	margin: 10px 0 60px 4em;
}
.wa-soudan {
	margin: 100px auto 0 auto;
	text-align: center;
}
.wa-window {
	margin: 0 auto 0 auto;
	border-spacing: 20px;
	padding: 10px;
	font-size: 1.5em;
}
.wa-window th {
	width: 150px;
	height: 50px;
	padding: 0 20px 0 20px;
	background-color:rgb(219, 216, 216);
}
.wa-window tr:nth-child(1) th:nth-child(3) { /*空白マスを白にして20pxに縮め白にする*/
	width: 20px;
	background-color: rgb(255, 255, 255);
}
.wa-window tr:nth-child(1) th:nth-child(4) { /*画像を貼り込むマスを拡大して白にする*/
	width: auto;
	background-color: rgb(255, 255, 255);
	padding: 0;
}
.wa-foot {
	margin: 100px auto 0 auto;
	text-align: center;
}
/*　↓↓↓カーフィルム↓↓↓　*/
#carfilm-photo {
	background-image: url(../images/carfilm.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	margin: 100px auto 0;
	width: 80%;
	height: 500px;
	padding: 150px;
	color: rgb(255, 255, 255);
}
#carfilm {
	text-align: center;
	margin: 0 auto 0 auto;
	width: 80%;
}
.carfilm-title {
	font-size: 1.5em;
}
.carfilm-icon {
}
.caricon {
	display: inline-block;
	text-align: center;
	margin: 50px;
}
.caricon img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;
}
.cap {
	font-size: 1.5em;
}
.carfilm-tile {
	width: 80%;
	display: flex;
	background: rgb(248, 209, 183);
	padding: 80px 0;
	justify-content: center;
	gap: 100px;
	margin: 0 auto;
}
.cartile1 {
	margin: auto 0px;
	background:rgb(131, 131, 131);
	border-radius: 30px;
	color: white;
	font-size: 1.5em;
	line-height: 0.5em;
	padding: 0px 30px;
}
.cartile2 {
}
.cartile2-1 {
	display: inline-block;
	background: white;
	color: rgb(255, 123, 0);
	padding: 5px 30px;
	width: 200px;
	margin: auto 20px;
	font-size: 1.5em;
	font-weight: bold;
}

/*↓↓↓　建築用フィルム　↓↓↓*/
#atfilm-photo {
	background-image: url(../images/atfilm.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	margin: 100px auto 0;
	width: 80%;
	height: 500px;
	padding: 150px;
	color: rgb(255, 255, 255);
}
#atfilm {

}
.atfilm-title {
	text-align: center;
	margin: 0 auto;
	font-size: 1.5em;
}
.atfilm-icon {
	text-align: center;
}
.aticon {
	display: inline-block;
	text-align: center;
	margin: 50px;
}
.aticon img {
	width: 150px;
	height: 150px;
	object-fit: cover;
}


/*　↓↓↓フッター↓↓↓　*/
#foot {
	text-align: center;
	margin: 50px 0 0;
	padding: 20px 100px;
	background: rgb(48, 48, 48);
	color: rgb(255, 255, 255);
}
.foot-col1 {
	flex: 0 0 500px;
}
.foot-col1 img  {
	width:200px;
}
.foot-col1 span  {
	font-size: 1.5em;
}
.foot-col2 {
	flex: 0 0 300px;
}
.foot-col3 {
	flex: 0 0 300px;
}
.foot-col4 {
	flex: 0 0 300px;
}


/*　↓↓↓会社概要↓↓↓　*/
#company-title {
	background-image: url(../images/jtrim.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	margin: 100px auto 0;
	width: 80%;
	height: 500px;
	padding: 150px;
	color: rgb(255, 123, 0);
}
.company {
	font-size:2em;
	border-collapse: collapse;
	border: 1px solid black;
	font-size: 1.2em;
	margin: 100px auto 20px auto;
}
.company th {
	text-align: left;
	width: 200px;
	padding: 5px 50px;
	border: 1px solid black;
	background:  rgb(172, 171, 171);
}
.company td {
	text-align: left;
	width: 600px;
	padding: 5px 100px;
	border: 1px solid black;
}
.company-map {
	text-align: center;
}
.company-map iframe {
	width: 80%;
	aspect-ratio: 16/9;
}
.company-foot,.carfilm-foot,.atfilm-foot {
	text-align: center;
	margin-top: 50px;
}
.company-foot,.carfilm-foot,.atfilm-foot li {
	margin-top: 50px;
}
.gosoudan {
	font-size: 2em;
}

/*　↓↓↓お問い合わせ　tallyを埋め込む↓↓↓　*/
.contact {
	margin: 100px auto 0;
	text-align: center;
	background: rgb(233, 233, 233);
	padding: 20px 20px 0 20px;
}
.contact-tile {
	display: flex;
	justify-content: center;
	gap: 50px;
}
.tel,.fax {
	border-collapse: collapse;
}
.tel th,.fax th {
	padding: 0 100px;
	color: white;
	background:  rgb(255, 123, 0);
	font-size: 2em;
}
.tel td,.fax td {
	background: white;
	font-size: 2em;
	line-height: 1em;
	font-weight: bold;
}
.contact-foot {
	margin: 50px auto 0 auto;
}
.contact-foot span {
	line-height: 5em;
}
.contact-tally {
	text-align:center;
	margin: 50px auto 50px auto;
}
.contact-tally iframe {
	width: 50%;
	height: 1800px;
}

/*スマートフォン向けCSS*/
@media (max-width: 767px) {

#top {
	padding: 0 10px;
	position: relative;
	gap: 0px;
	justify-content:left;
	align-items:center;
}
.top-item1 {
	flex: 1 1 15%;
	padding: 10px 0 0;
}
.top-item1 img {
	width: 100px;
}
.top-item2 {
	flex: 1 1 75%;
	text-align: left;
	margin: 0 0 0 0;
	padding: 0 0 0 10px;
}
.top-item3 {
	flex: 1 1 10%;
}
.shadow {font-size: 0.5em;}
.cn {font-size: 1.2em;}
.menu {display: none;}
#main {display: none;}
.nav-toggle {display: none;}

.btn-burger {
	position: absolute;
	top: 5px;
	right: 10px;
	z-index: 2;
	display: block;
	width: 44px;
	height: 44px;
	background: url("../images/burger.svg") center center / 35px 20px no-repeat;
	cursor: pointer;
}
.nav-toggle:checked ~ .btn-burger {
	background : url("../images/close.svg") center center / 26px 26px no-repeat;
}
.nav {
	padding-top: 10px;
	background: rgb(48, 48, 48);
}
.nav-list {
	display: none;
	margin: 0;
	padding-bottom: 10px;
}
.nav-list li {
	margin: 0;
	padding: 10px;
}
.nav-list a {
	display: block;
	padding: 0 0 0 20px;
	font-size: 1.5em;
	color: white;
}
.nav-toggle:checked ~ .nav .nav-list {
	display:block;
}
#container {
	width: 100%;
	margin: 10px auto 10px auto;
	padding: 10px 0 10px;
}
.cont-wrap {
	width: 100%;
	display: flex;
	row-gap: 10px;
	flex-flow:column;
	justify-content:space-between;
	margin: 50px auto 0 auto;
}
.cont-item {
	font-size: 0.7em;
	line-height: 1.5em;
}
.cont-item1 {
	order: 2;
}
.cont-item2 {
	order: 1;
}
.cont-item3 {
	order: 3;
}
.cont-item4 {
	order: 4;
}
.cont-item4 h2 {
	font-size:1.7em;
}
.cont-item5 {
	order: 6;
}
.cont-item5 h2 {
	font-size:1.7em;
}
.cont-item6 {
	order: 5;
}

#wrap-photo {
	margin: 10px auto 0;
	width: 100%;
	height: 200px;
	padding: 10px;
}
#wrapping {
	width: 100%;
	text-align: center;
	margin: 0 auto;
}
.wa-title {
	text-align: center;
	font-size: 1.5em;
}
.wa-cont {
	font-size: 0.8em;
	width: 100%;
	margin: 10px auto 0 auto;
	padding: 5px 10px 20px 10px;
}
.wa-list dd {
	font-size:1.8em;
}
.wa-list dd {
	margin: 10px 0 60px 4em;
}
.wa-soudan {
	display: none;
}

#carfilm-photo {
	margin: 10px auto 0;
	width: 100%;
	height: 200px;
	padding: 10px;
	color: rgb(255, 255, 255);
}
#carfilm {
	text-align: center;
	margin: 0 auto 0 auto;
	width: 100%;
}
.carfilm-title {
	font-size: 1.5em;
}
.caricon {
	display: inline-block;
	text-align: center;
	margin: 10px;
}
.caricon img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;
}
.cap {
	font-size: 1.5em;
}
.carfilm-tile {
	width: 100%;
	display: flex;
	flex-direction: column; /*フレックスボックスを縦に*/
	background: rgb(248, 209, 183);
	padding: 10px 0;
	justify-content: center;
	gap: 10px;
	margin: 0 auto;
}
.cartile1 {
	margin: auto 0px;
	background:rgb(131, 131, 131);
	border-radius: 30px;
	color: white;
	font-size: 1.3em;
	line-height: 0.5em;
	padding: 0px 30px;
}
.cartile2-1 {
	display: inline-block;
	background: white;
	color: rgb(255, 123, 0);
	padding: 5px 30px;
	width: 200px;
	margin: auto 20px;
	font-size: 1.5em;
	font-weight: bold;
}
#atfilm-photo {
	margin: 10px auto 0;
	width: 100%;
	height: 200px;
	padding: 10px;
	color: rgb(255, 255, 255);
}
.aticon {
	display: inline-block;
	text-align: center;
	margin: 20px;
}
#company-title {
	margin: 10px auto 0;
	width: 100%;
	height: 200px;
	padding: 10px;
	color: rgb(255, 123, 0);
}
.company {
	font-size:2em;
	border-collapse: collapse;
	border: 1px solid black;
	font-size: 1.2em;
	margin: 10px auto 20px auto;
}
.company th {
	text-align: left;
	width: 100px;
	padding: 5px 10px;
	border: 1px solid black;
	background:  rgb(172, 171, 171);
}
.company td {
	text-align: left;
	width: 400px;
	padding: 5px 10px;
	border: 1px solid black;
}
.company-map iframe {
	width: 100%;
	aspect-ratio: auto;
}
.company-foot,.carfilm-foot,.atfilm-foot {
	text-align: center;
	margin-top: 50px;
}
.company-foot,.carfilm-foot,.atfilm-foot li {
	margin-top: 50px;
}

.contact {
	margin: 10px auto 0;
	text-align: center;
	background: rgb(233, 233, 233);
	padding: 20px 20px 0 20px;
}
.contact h1 {
	font-size: 1.6em;
}
.contact-tile {
	display: flex;
	justify-content: center;
	gap: 10px;
}
.tel,.fax {
	border-collapse: collapse;
}
.tel th,.fax th {
	padding: 0 30px;
	color: white;
	background:  rgb(255, 123, 0);
	font-size: 1.2em;
}
.tel td,.fax td {
	background: white;
	font-size: 1.2em;
	line-height: 1em;
	font-weight: bold;
}
.contact-foot {
	font-size: 0.9em;
	margin: 30px auto 0 auto;
}
.contact-tally iframe {
	width: 100%;
	height: 1800px;
}

#foot {
	font-size: 0.7em;
	margin: 50px 0 0;
	padding: 10px 10px;
}

}