@charset "utf-8";
/*------------------------------------------------------------
	トープページ
------------------------------------------------------------*/
.mainVisual {
	margin: 0 20px 92px;
	padding: 16px 0;
	position: relative;
	margin-top: 120px;
}

.mainVisual .pho01 {
	position: absolute;
	left: -20px;
	top: 0;
}

.mainVisual .pho02 {
	position: absolute;
	bottom: -250px;
	right: -20px;
}

.mainVisual .slideBox {
	margin: 0 auto;
	max-width: 1380px;
}

.mainVisual .slideBox img {
	width: 100%;
}

#main .textBox {
	margin: 0 auto 99px;
	width: 996px;
	position: relative;
}

#main .textBox .text {
	position: absolute;
	right: -56px;
	top: -204px;
}

#main .textBox .inner {
	padding-right: 206px;
}

#main .textBox p {
	padding-right: 20px;
	float: right;
	line-height: 2.5;
	letter-spacing: 3px;
	writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
}

#main .textBox .link {
	position: absolute;
	left: 0;
	top: 0;
}

#main .textBox .link a {
	padding: 10px 5px;
	display: inline-block;
	color: #522904;
	letter-spacing: 3px;
	border: 1px solid #522904;
	writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
}

#main .textBox .link a:hover {
	background-color: #522904;
	color: #fff;
	-webkit-transition: all .5s;
	transition: all .5s;
}

#main .sec01 {
	margin: 0 auto;
	padding: 104px 6.98% 92px;
	max-width: 1380px;
	box-sizing: border-box;
	background-color: #fff;
}

#main .sec01 ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#main .sec01 li {
	width: 32%;
}

#main .sec01 li a {
	display: block;
	color: #522904;
}

#main .sec01 li a:hover {
	opacity: 0.7;
	-webkit-transition: all .5s;
	transition: all .5s;
}

#main .sec01 .headLine02 {
	margin-top: 80px;
	font-size: 22px;
}

#main .sec01 li img {
	width: 100%;
}

#main .sec01 li span {
	margin-top: 22px;
	display: block;
	font-weight: bold;
	text-align: center;
}

#main .sec01 .service-list li {
	width: 24%;
}

#main .sec02 {
	padding: 95px 0 142px;
	position: relative;
}

#main .sec02 .pho01 {
	position: absolute;
	left: 0;
	top: 5px;
}

#main .sec02 .pho02 {
	position: absolute;
	right: 0;
	bottom: 65px;
}

#main .sec02 .headLine02 {
	margin-bottom: 65px;
}

#main .sec02 .comLink {
	margin-top: 30px;
}

#main .sec02 .slider {
	margin-bottom: 40px;
}

#main .sec02 .slider li {
	margin: 0 25px;
	padding-bottom: 25px;
	width: 723px;
	float: left;
	background-color: #fff;
}

#main .sec02 .slider li .txt {
	padding: 0 20px;
}

#main .sec02 .slider li a {
	display: block;
	color: #522904;
}

#main .sec02 .slider li a:hover {
	opacity: 0.7;
	-webkit-transition: all .5s;
	transition: all .5s;
}

#main .sec02 .slider li .photo {
    position: relative;
    aspect-ratio: 128 / 96;
}

#main .sec02 .slider li .photo img {
	object-fit: cover;
    object-position: center;
	max-width: 100%;
    max-height: 100%;
}

#main .sec02 li .ttl {
	margin-top: 20px;
	margin-bottom: 8px;
	font-size: 16px;
}

#main .sec02 li p {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 1.8;
}

#main .sec02 .foo {
	text-align: center;
}

#main .sec02 .foo li {
	margin: 0 15px;
	width: 22px;
	cursor: pointer;
	height: 22px;
	background: url(../../image/foo_out.png) no-repeat center center;
	background-size: 100%;
	display: inline-block;
}

#main .sec02 .foo li.slick-active {
	background-image: url(../../image/foo_over.png);
}

#main .sec02 .foo li button {
	display: none;
}

#main .sec03 {
	margin: 0 auto 60px;
	padding: 35px 0;
	max-width: 1380px;
	background: url(../../image/photo04.jpg) no-repeat center center;
	background-size: cover;
}

#main .sec03 .inner {
	margin: 0 auto;
	width: 700px;
	display: flex;
	justify-content: center;
}

#main .sec03 .inner .headLine02 {
	color: #fff;
    writing-mode: tb-rl;
    text-align: left;
    margin: 0 auto 45px;
    font-size: 1.7em;
}

#main .sec03 .inner .left{
	padding: 56px 0 28px;
	width: 350px;
	background: url(../../image/bg05.jpg) repeat left top;
}
#main .sec03 .inner .right{
	padding: 56px 0 28px;
	width: 350px;
	background: url(../../image/bg06.jpg) repeat left top;
}
#main .sec03 .inner .right .comLink a {
    background-color: #341800;
}
#main .sec03 .inner .right .comLink01 {
    margin-bottom: 8px;
}
#main .sec03 p {
	margin-bottom: 32px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	line-height: 2;
	text-align: center;
}

#main .sec04 {
	position: relative;
	margin-bottom: 57px;
	background: none;
}


#main .sec04 .slider02 {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

#main .sec04 .slider02 li {
	background-size: cover;
	background-position: center;
	width: 690px;
	max-width: calc(50vw - 20px);
}

#main .sec04 .slider02 .slick-track {
	height: 550px;
	z-index: -1;
}

#main .sec04 .slider02 li.bg01 {
	background-image: url(../../image/top_a.jpg);
}

#main .sec04 .slider02 li.bg02 {
	background-image: url(../../image/top_b.jpg);
}

#main .sec04 .slider02 li.bg03 {
	background-image: url(../../image/top_c.jpg);
}

#main .sec04 .slider02 li.bg04 {
	background-image: url(../../image/top_d.jpg);
}

#main .sec04 .slider02 li.bg05 {
	background-image: url(../../image/top_e.jpg);
}

#main .sec04 .slider02 li.bg06 {
	background-image: url(../../image/top_f.jpg);
}


#main .sec04 .inner {
	padding: 62px 0 25px;
	background-image: url(../../image/bg06.jpg);
	position: relative;
	margin-top: -250px;
}

#main .sec04 .headLine02 {
	margin-bottom: 25px;
}

#main .sec04 p {
	margin-bottom: 36px;
}

#main .sec04 .comLink a {
	background-color: #341800;
}

#main .sec04 .comLink01 {
	margin-bottom: 8px;
}

#main .sec05 {
	margin: 0 auto;
	padding: 73px 0 68px;
	max-width: 1380px;
	background-color: #fff;
}

#main .sec05 .headLine01 {
	margin-bottom: 40px;
}

#main .sec05 p {
	margin-bottom: 38px;
	font-size: 14px;
	font-weight: bold;
	line-height: 2.15;
	text-align: center;
}

#main .sec05 .comLink a {
	background-color: #83A944;
}

#main .instagram {
	text-align: center;
	margin-bottom: 40px;
}

#main .instagram .title {
	margin-bottom: 20px;
}

@media all and (min-width: 768px) and (max-width: 1300px) {
	#main .textBox .text {
		right: 0;
	}
}

@media all and (min-width: 0) and (max-width: 767px) {
	.mainVisual {
		margin: 38px 0 12px;
		padding: 18px 0;
	}
	
	.mainVisual .pho01 {
		width: 23%;
		top: -5px;
	}
	
	.mainVisual .pho01 img {
		width: 100%;
	}
	
	.mainVisual .slideBox {
		max-width: inherit;
	}
	
	.mainVisual .pho02 {
		display: none;
	}
	
	#main .textBox {
		margin-bottom: 34px;
		padding: 0 20px;
		width: auto; 
	}
	
	#main .textBox .text {
		right: inherit;
		left: 5%;
		top: -138px;
	}
	
	#main .textBox .text img {
		width: 49px;
	}
	
	#main .textBox .pho {
		width: 21%;
		position: absolute;
		right: 0;
		bottom: 7px;
	}
	
	#main .textBox .pho img {
		width: 100%;
	}
	
	#main .textBox .inner {
		padding-right: 0;
		min-width: inherit;
	}
	
	#main .textBox p {
		margin-bottom: 10px;
		padding: 0;
		font-size: 12px;
		text-align: center;
		float: none;
		line-height: 2;
		letter-spacing: 2px;
		writing-mode: horizontal-tb;
		-webkit-writing-mode: horizontal-tb;
		-moz-writing-mode: horizontal-tb;
	}
	
	#main .textBox .link {
		margin: 0 auto;
		width: 61%;
		position: inherit;
		left: inherit;
		top: inherit;
	}
	
	#main .textBox .link a {
		padding: 6px 5px 5px;
		display: block;
		font-size: 14px;
		text-align: center;
		letter-spacing: 1.5px;
		writing-mode: horizontal-tb;
		-webkit-writing-mode: horizontal-tb;
		-moz-writing-mode: horizontal-tb;
	}
	
	#main .textBox .txt {
		margin-bottom: 14px;
	}
	
	#main .sec01 {
		padding: 32px 20px;
		max-width: inherit;
	}
	
	#main .sec01 .headLine01 img {
		width: 107px;
	}
	
	#main .sec01 li {
		margin: 0 0 19px;
		width: auto;
		float: none;
	}
	
	#main .sec01 li span {
		margin-top: 11px;
		font-size: 14px;
	}
	
	#main .sec01 li:last-child {
		margin: 0;
	}
	
	#main .sec01 .service-list li {
		width: 48%;
	}
	
	#main .sec02 {
		padding: 33px 0 48px 20px;
	}
	
	#main .sec02 .headLine01 {
		margin-bottom: 26px;
		padding-right: 20px;
	}
	
	#main .sec01 .headLine02 {
		margin-top: 60px;
		font-size: 20px;
	}
	
	#main .sec02 .headLine01 img {
		width: 78px;
	}
	
	#main .sec02 .pho01 {
		width: 23%;
		top: 33px;
	}
	
	#main .sec02 .pho01 img {
		width: 100%;
	}

	#main .sec02 .slider li .photo {
		height: 200px;
	}
	
	#main .sec02 .slider li .photo img {
		height: 250px;
	}
	
	#main .sec02 .slider {
		margin-bottom: 23px;
	}
	
	#main .sec02 .slider .slick-list {
		padding-left: 0 !important;
	}
	
	#main .sec02 .slider li {
		margin: 0 20px 0 0;
		padding-bottom: 18px;
		width: auto;
	}
	
	#main .sec02 .slider li img {
		margin-bottom: 15px;
		width: 100%;
		height: auto;
	}
	
	#main .sec02 .foo li {
		width: 16px;
		height: 16px;
	}
	
	#main .sec02 li .ttl {
		margin-bottom: 7px;
		font-size: 14px;
	}
	
	#main .sec02 li p {
		margin: 0 20px;
		padding: 0;
		font-size: 10px;
	}
	
	#main .sec02 .slider li .txt {
		padding: 0;
	}
	
	#main .sec02 .pho02 {
		width: 27%;
		bottom: 45px;
	}
	
	#main .sec02 .pho02 img {
		width: 100%;
	}
	
	#main .sec02 .foo {
		padding-right: 20px;
	}
	#main .sec02 .comLink {
		padding-right: 20px;
	}
	
	#main .sec02 .foo li {
		margin: 0 10px;
	}
	
	#main .sec02 .foo li img {
		width: 16px;
	}
	
	#main .sec03 {
		margin-bottom: 15px;
		padding-bottom: 33px;
		max-width: inherit;
		background-image: url(../../image/sp_photo04.jpg);
	}
	
	#main .sec03 .inner {
		padding: 22px 15px 11px;
		width: 100%;
		box-sizing: border-box;
		flex-wrap: wrap;
	}
	#main .sec03 .inner .left ,
	#main .sec03 .inner .right {
		width: 100%;
		padding: 22px 15px 11px;
		box-sizing: border-box;
	}
	
	#main .sec03 .inner .headLine02 {
		margin: 0 auto 13px;
		font-size: 1.4em;
	}
	
	#main .sec03 .headLine02 img {
		width: 38px;
	}
	#main .sec03 .right .headLine02 img {
		width: 20px;
	}
	
	#main .sec03 p {
		margin-bottom: 20px;
		font-size: 12px;
		line-height: 1.86;
	}
	
	#main .sec04 {
		padding: 40px 0 31px;
		background-image: none;
	}
	
	#main .sec04 .slider02 {
		position: relative;
	}
	
	#main .sec04 .slider02 .slick-track {
		height: 37.5vw;
	}
	
	#main .sec04 .slider02 li {
		max-width: inherit;
	}
	
	#main .sec04 .inner {
		padding: 18px 15px 14px;
		margin-top: -40px;
	}
	
	#main .sec04 .headLine02 {
		margin-bottom: 18px;
	}
	
	#main .sec04 .headLine02 img {
		width: 20px;
	}

	#main .sec04 p {
		margin-bottom: 14px;
	}
	
	#main .sec04 .comLink01 {
		margin-bottom: 6px;
	}
	
	#main .sec05 {
		padding: 35px 20px 37px;
		max-width: inherit;
	}
	
	#main .sec05 .headLine01 {
		margin-bottom: 18px;
	}
	
	#main .sec05 .headLine01 img {
		width: 110px;
	}
	
	#main .sec05 p {
		margin-bottom: 16px;
		font-size: 12px;
		line-height: 1.85;
	}
	
	#main .sec05 .comLink {
		width: 50%;
	}
	
	#main .instagram {
		padding-top: 20px;
	}
	
	#main .instagram .title{
		width: 120px;
		height: auto;
	}
	
}