@charset "UTF-8";


/*--------------------------------------------------------------------------------------------------

   page

--------------------------------------------------------------------------------------------------*/

/* index-------------------------------------------------- */

.hero-animation{
  position:relative;
  width:1200px;
  height:900px;
		margin: 0 auto;
		padding: 20px 0 0;
}

.hero.section {
	padding: 0;
}

.hero-img{
  position:absolute;
  opacity:0;
  animation: heroSlide 4s;
		animation-fill-mode:forwards;
}

.hero-img{
  transition: opacity 1.5s;
}

.img1{
	animation-delay:1s;
	top: 50px;
	right: 120px;
}

.img2{
	animation-delay:2s;
	top: 70px;
	left: 0;
}

.img3{
	animation-delay:3s;
	top: 0;
	left: 20px;
}

.img4{
	animation-delay:4s;
	bottom: 40px;
	left: -120px;
}

.img5{
	animation-delay: 5s;
	top: 70px;
	left: 700px;
}

@keyframes heroSlide {

  0%{
    opacity: 0;
  }

  50%{
    opacity: 1;
  }

  100%{
    opacity: 1;
  }
}


/* ========================================
   Hero
======================================== */
.hero{
}

.hero-visual{
  overflow:hidden;
  border-radius:32px;
  background:#fff;
  box-shadow:var(--shadow);
}

.hero-visual img{
  width:100%;
  object-fit:cover;
}

/* ========================================
   Cards
======================================== */
.cards-grid{
 	position: relative;
  display:flex;
  margin-top:10px;
		justify-content: space-between;
}

.service-card{
		width: 46%;
  display:flex;
  padding: 40px 30px;
  background: #E6F2E1;
  border-radius: 20px;
  box-shadow: 0 0 6px #CCC;
		align-items: center;
}

.service-card__body h2,
.wide-banner__text h2{
  margin:0 0 10px;
  color:var(--green-dark);
  font-size:26px;
  line-height:1.4;
		text-shadow: 
    0.2px 0 0 #0a6c64, 
    -0.2px 0 0 #0a6c64, 
    0 0.2px 0 #0a6c64, 
    0 -0.2px 0 #0a6c64;
}

.service-card__body h2 span {
	 font-size: 16px;
		display: block;
}

.service-card__body p,
.wide-banner__text p{
  margin:0;
}

.service-card__logo {
	margin-right: 30px;
}

.service-card__logo img {
	width: 100%;
}

.cards-grid .arrow{
	position: absolute;
  width:52px;
  height:52px;
  color:#fff;
  background:var(--green);
  border-radius:50%;
  font-size:22px;
		bottom: 40px;
		right: 40px;
		text-align: center;
		padding: 4px 0 0;
}

.service-card:hover .arrow{
	color: var(--green);
	background-color: #FFF;
}

.wide-banner{
	position: relative;
	margin: 80px 0 0;
	padding: 60px 60px 0;
  display:flex;
  min-height:252px;
  color:#fff;
		background: url(../image/index_yuzuriha_back.png) no-repeat 0 0;
		background-size: cover;
}

.wide-banner div.illust {
	margin: 20px 0 0 40px;
}

.wide-banner__text{
  max-width: 300px;
}

.wide-banner__text h2{
  color:#fff;
		text-shadow: 
    0.2px 0 0 #FFF, 
    -0.2px 0 0 #FFF, 
    0 0.2px 0 #FFF, 
    0 -0.2px 0 #FFF;
}

.wide-banner .arrow {
	position: absolute;
	left: 470px;
	bottom: 62px;
color: var(--green);
  border-radius:50%;
  font-size:22px;
  width:52px;
  height:52px;
		background-color: #FFF;
		text-align: center;
		padding: 4px 0 0;
}

.wide-banner:hover .arrow {
	background-color: var(--green);
	color: #FFF;
}


/* ========================================
   News
======================================== */
.news{
  padding:80px 0 100px;
}

.news-inner{
  max-width:900px;
}

.section-heading{
  text-align:center;
  margin-bottom:34px;
}

.section-heading h2{
  margin:0;
  font-size: 40px;
  letter-spacing:.08em;
  line-height:1.1;
		display: flex;
		align-items: center;
		justify-content: center;
}

.section-heading span{
	font-size: 16px;
	letter-spacing: 0;
	margin-left: 16px;
}

.news-list{
	width: 1000px;
	margin: 0 auto;
}

.news-item{
  padding:24px 0;
  border-bottom:1px solid #434343;
}

.news-meta{
  display:flex;
  align-items:center;
  gap:20px;
		margin-bottom: 10px;
}

.category,
.new{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;
  padding:0 12px;
  border-radius:10px;
}

.category{
  background:#02756F;
  color:#fff;
		width: 160px;
}

.new{
  border:2px solid #7ac8b7;
  color:#2caa92;
  background:#fff;
		width: 46px;
		height: 46px;
		border-radius: 50%;
		font-size: 14px;
}

.news-item time{
	margin-right: 20px;
}

.news-item a{
  transition:.3s;
}

.news-item a:hover{
  color:var(--green);
}

.news-button{
  margin-top:60px;
  text-align:center;
}

.news-button .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:350px;
		height: 60px;
  padding: 0 26px;
  color:#fff;
  background:#02756F;
  border-radius:12px;
  transition:.3s;
		letter-spacing: 0.1em;
		font-weight: normal;
		font-size: 20px;
}


/*news--------------------------------------------------*/
.newsWrap {
	display: flex;
	justify-content: space-between;
}

.newsWrap .all {
	width: 840px;
}

.newsWrap .all ul.cat {
	display: flex;
	gap: 20px;
	margin: 0 0 40px;
}

.newsWrap .all ul.cat li a {
	width: 150px;
	line-height: 30px;
	background-color:	#02756F;
	color: #FFF;
	border-radius: 10px;
	display: block;
	text-align: center;
	border: 2px solid #02756F;
	box-shadow: 2px 2px 3px #AAA;
}

.newsWrap .all ul.cat li a:hover {
	background-color: #FFF;
	color: #02756F;
}

.newsWrap .all .news-list {
	width: 100%;
}

.newsWrap .info {
	width: 300px;
}

.newsWrap .info .archive {
	margin: 0 0 60px;
	background-color: #e6f2e1;
	padding: 30px 20px;
	border-radius: 20px;
}

.newsWrap .info p {
	margin: 0 0 20px !important;
	color: #02756f;
	font-size: 18px;
	text-align: center;
}

.newsWrap .info ul li a {
	text-decoration: underline;
	font-size: 18px;
}

.newsWrap .info .recently {
	margin: 0 0 60px;
	background-color: #e6f2e1;
	padding: 30px 20px;
	border-radius: 20px;
}

.newsWrap .info .recently ul {
	list-style: disc;
	margin: 0 20px;
}

.newsWrap .info .recently ul li {
	margin-bottom: 8px;
}

.newsWrap .info .recently ul li a {
	line-height: 1.4;
}

#second .pager_wrap {
	position: relative;
	overflow: hidden;
	margin: 60px 0;
}

#second .pager_wrap ul.pager {
	position: relative;
	left: 50%;
	float: left;
}

#second .pager_wrap ul.pager li {
	position: relative;
	left: -50%;
	float: left;
}

#second .pager_wrap ul.pager {
	margin: 0;
	padding: 0;
	list-style: none;
}

#second .pager_wrap ul.pager li {
	display: inline;
	min-width: 20px;
	margin: 2px;
	padding: 0;
	background-color: #FFF;
	text-align: center;
	text-indent: 0;
}

#second .pager_wrap ul.pager li a {
	display: block;
	padding: 10px 15px;
	text-decoration: none;
	border: none;
}

#second .pager_wrap ul.pager li::before {
content: "";
margin-right: 0;
}

#second .pager_wrap ul.pager li.active {
	display: block;
	padding: 10px 15px;
	color: #8ecec9;
}

#second .pager_wrap ul.pager li.active a:link, #second .pager_wrap ul.pager li.active a:visited,
#second .pager_wrap ul.pager li.active a:hover, #second .pager_wrap ul.pager li.active a:active {
	color: #FFFFFF !important;
}

#second .pager_wrap ul.pager li a:hover {
	color: #000;
}

.newsDetail .category {
	margin: 30px 0 10px;
}

.newsDetail .date {
	margin: 0 0 10px;
}

.newsDetail h3 {
	margin: 0 0 30px;
	font-size: 18px;
	text-shadow: 
    0.2px 0 0 #000, 
    -0.2px 0 0 #000, 
    0 0.2px 0 #000, 
    0 -0.2px 0 #000;
}

.newsDetail .detail {
	margin: 0 0 60px;
	line-height: 2;
}

.newsDetail .detail p {
	margin: 0 0 20px !important;
}

.newsDetail .detail a {
    text-decoration: underline;
}

.prevNext ul {
	margin: 0 0 60px;
	display: flex;
	justify-content: center;
	gap: 100px;
	letter-spacing: 0.6em;
}

.prevNext ul li a:hover {
	color: #02756f;
}

.newsWrap .cat li.now a {
	background-color: #FFF !important;
	color: #02756F !important;
}


/*トモニー--------------------------------------------------*/
#second .inner .ccWrap {
	position: relative;
	margin: 0 0 130px;
}

#second .inner .ccWrap .ccInner {
	position: relative;
	width: 94vw;
	margin: 0 calc(50% - 47vw);
	background: url(../image/cc_back.png) no-repeat center center;
	background-size: cover;
	border-radius: 30px; 
	left: 0;
	top: 0;
}

#second .inner .ccWrap .ccInner .inner {
	padding: 60px 80px;
}

.ccInner .inner h3 {
	margin: 0 0 40px;
	display: flex;
	align-items: center;
	color: #02756f;
	font-size: 40px;
	text-shadow: 
    0.2px 0 0 #02756f, 
    -0.2px 0 0 #02756f, 
    0 0.2px 0 #02756f, 
    0 -0.2px 0 #02756f;
	letter-spacing: 0.06em;
}

.ccInner .inner h3 span {
	font-size: 16px;
	margin-left: 20px;
}

.ccInner .inner .clm2 {
	display: flex;
	margin: 0 0 60px;
}

.ccInner .inner .clm2 .photo {
	width: 522px;
}

.ccInner .inner .clm2 .text {
	width: calc( 100% - 522px );
	line-height: 2;
}

.ccInner .inner .clm2 .text dt {
	margin: 0 0 20px;
	font-size: 22px;
	text-shadow: 
    0.2px 0 0 #000, 
    -0.2px 0 0 #000, 
    0 0.2px 0 #000, 
    0 -0.2px 0 #000;
	letter-spacing: 0.06em;
}

#cc01 .ccInner .inner {
	background: url(../image/tomony-04.png) no-repeat 96% 96%;
}

#cc02 .ccInner .inner {
	background: url(../image/tomony-06.png) no-repeat 90% 80%;
}

#cc03 .ccInner .inner {
	background: url(../image/tomony-09.png) no-repeat 90% 90%;
}

#cc04 .ccInner .inner {
	background: url(../image/tomony-13.png) no-repeat 90% 90%;
}

.ccBtn {
	display: block;
	width: 460px;
	border-radius: 20px;
	background-color: #02756f;
	color: #FFF;
	text-align: center;
	margin: 40px 0 0;
	padding: 18px 0;
	border: 2px solid #02756f;
	box-shadow: 2px 2px 3px #AAA;
}

.ccBtn:hover {
	background-color: #FFF;
	color: #02756f;
}

.contactBtn {
	margin: 0 0 130px;
	text-align: center;
}

.contactBtn a {
	display: block;
	font-size: 30px;
	background-color: #02756f;
	color: #FFF;
	padding: 20px 0;
	border-radius: 20px;
}

.contactBtn a span {
	font-size: 22px;
	display: block;
}


/*kizuna*/
.clm2-k {
	display: flex;
	justify-content: space-between;
	margin: 0 0 70px;
}

.clm2-k div {
	width: 560px;
	background-color: #fef5f1;
	padding: 30px;
	border-radius: 30px;
}

.clm2-k div h3 {
	font-size: 30px;
	letter-spacing: 0.1em;
	text-shadow: 
    0.2px 0 0 #000, 
    -0.2px 0 0 #000, 
    0 0.2px 0 #000, 
    0 -0.2px 0 #000;
	background: url(../image/leaf-01.png) no-repeat 0 12px;
	padding: 0 0 0 46px;
	margin: 0 0 20px;
}

.clm2-k div h3 span {
	color: #02756f;
	text-shadow: 
    0.2px 0 0 #02756f, 
    -0.2px 0 0 #02756f, 
    0 0.2px 0 #02756f, 
    0 -0.2px 0 #02756f;
}

#second .inner .ccWrap .ccInner.k {
	background-image: none !important;
	background-color: #fef5f1 !important;
}

.ccInner.k .inner h3 {
	margin: 0 !important;
	justify-content: center;
}

.ccInner.k .inner .sub {
	text-align: center;
	font-size: 30px;
	color: #02756f;
	letter-spacing: 0.1em;
}

#cc01 .ccInner.k .inner {
	background-image: none;
}

#cc02 .ccInner.k .inner {
	background-image: none;
}

.cImage {
	margin: 40px 0;
}

.cImage img {
	display: block;
	margin: 0 auto;
}

.ccInner .inner .clm2.k .photo img {
	display: block;
	margin: 0 0 0 auto;	
}

.contactBtnk {
	margin: 0 0 200px;
	text-align: center;
	position: relative;
	z-index: 10;
}

.contactBtnk a {
	display: block;
	font-size: 30px;
	background-color: #f29b76;
	color: #FFF;
	padding: 20px 0;
	border-radius: 20px;
}

.contactBtnk a span {
	font-size: 22px;
	display: block;
}

.kizunaStep {
	width: 795px;
	margin: 0 auto 80px;
}

.kizunaStep li {
	display: flex;
	background-color: #e6f2e1;
	margin: 0 0 20px;
	padding: 30px;
	border-radius: 20px;
	box-shadow: 3px 3px 3px #AAA;
	align-items: center;
}

.kizunaStep li div {
	width: 70px;
	margin-right: 30px;
	font-size: 20px;
	text-align: center;
	background: url(../image/leaf-02.png) no-repeat center 99%;
	color: #02756f;
	text-shadow: 
    0.2px 0 0 #02756f, 
    -0.2px 0 0 #02756f, 
    0 0.2px 0 #02756f, 
    0 -0.2px 0 #02756f;
	line-height: 1.2;
}

.kizunaStep li div span {
	font-size: 40px;
	display: block;
}

.kizunaStep li dt {
	font-size: 20px;
	color: #02756f;
	text-shadow: 
    0.2px 0 0 #02756f, 
    -0.2px 0 0 #02756f, 
    0 0.2px 0 #02756f, 
    0 -0.2px 0 #02756f;
}

.kizunaStep li:nth-child(6) {
	background: url(../image/kizuna-15.png) #e6f2e1 no-repeat 90% bottom;
}

/*yuzuriha*/
.pageNavi-y {
	width: 880px;
	margin: 0 auto 30px;
	display: flex;
	justify-content: space-between;
}

.pageNavi-y li a {
	color: #FFF;
	text-align: center;
}

.pageNavi-y li a img {
	display: block;
	margin: 0 auto 10px;
}

.pageNavi-y li a div {
	width: 251px;
	line-height: 50px;
	padding-bottom: 4px;
}

.pageNavi-y li:nth-child(1) a div {
	background: url(../image/yuzuriha-03.png) no-repeat 0 0;
}

.pageNavi-y li:nth-child(2) a div {
	background: url(../image/yuzuriha-04.png) no-repeat 0 0;
}

.pageNavi-y li:nth-child(3) a div {
	background: url(../image/yuzuriha-05.png) no-repeat 0 0;
}

.greenCenter {
	margin: -20px 0 30px;
	font-size: 30px;
	color: #02756f;
	text-shadow: 
    0.2px 0 0 #02756f, 
    -0.2px 0 0 #02756f, 
    0 0.2px 0 #02756f, 
    0 -0.2px 0 #02756f;
	text-align: center;
}

.greenCenter span {
	font-size: 36px;
}

.ccInner.y h3 {
	justify-content: center;
	color: #000;
	text-shadow:
	0.2px 0 0 #000, 
    -0.2px 0 0 #000, 
    0 0.2px 0 #000, 
    0 -0.2px 0 #000;
}

.lead04 {
	margin: 0 0 40px;
	text-align: center;
}

.teisyokuMenu {
	margin: 0 0 60px;
	display: flex;
	justify-content: space-between;
}

.teisyokuMenu .menus {
	position: relative;
}

.teisyokuMenu .menus:before {
	position: absolute;
	content: "";
	background: url(../image/yuzuriha-08.png) no-repeat;
	width: 168px;
	height: 191px;
	bottom: 50px;
	right: -90px;
}

.teisyokuMenu .menus p {
	margin: 0 0 100px;
	position: relative;
	color: #FFF;
	background-color: #f29b76;
	border-radius: 16px;
	padding: 10px 16px;
	font-size: 22px;
}

.teisyokuMenu .menus p:before {
	position: absolute;
	bottom: -10px;
	left: 80px;
	content: "";
	background: url(../image/yuzuriha-09.png);
	width: 35px;
	height: 11px;
}

.teisyokuMenu .menus li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 50px;
}

.teisyokuMenu .menus li:before {
	position: absolute;
	content: "・";
	color: #02756f;
	top: -2px;
	left: 0;
	font-size: 26px;
}

.teisyokuMenu .menus li a {
	position: relative;
	font-size: 22px;
	padding-right: 70px;
	color: #02756f;
}

.teisyokuMenu .menus li a .arrow{
	position: absolute;
  width:52px;
  height:52px;
  color:#fff;
  background:var(--green);
  border-radius:50%;
  font-size:22px;
		bottom: -12px;
		right: 0;
		text-align: center;
		padding: 4px 0 0;
		box-shadow: 2px 2px 3px #AAA;
}

.teisyokuMenu .menus li a:hover .arrow{
	color: var(--green);
	background-color: #FFF;
}

.teisyokuMenu .photo {
	position: relative;
	width: 486px;
}

.teisyokuMenu .photo .comment {
	display: flex;
	align-items: start;
}

.teisyokuMenu .photo .comment .greenCenter {
	font-size: 24px;
	text-align: left;
	margin: 0 30px 0 0;
	line-height: 1.4;
}

.teisyokuMenu .photo .comment .lead04 {
	margin: 0 0 20px !important;
	text-align: left;
}

.teisyokuMenu .photo2:before {
	position: absolute;
	content: "";
	background: url(../image/yuzuriha-17.png) no-repeat;
	width: 208px;
	height: 301px;
	bottom: -27px;
	right: -66px;
}

.teisyokuPop {
	width: 720px;
	margin: 0 auto;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.teisyokuPop li {
	position:relative;
	text-align: center;
	margin: 0 0 40px;
}

.teisyokuPop li.ninki:before {
	position: absolute;
	content: "";
	top: -20px;
	left: -20px;
	background: url(../image/yuzuriha-18.png) no-repeat 0 0;
	width: 77px;
	height: 77px;
	z-index: 10;
}

.teisyokuPop li img {
	display: block;
	margin: 0 auto 8px;
}

.teisyokuPop li img.sp {
	display: none;
}

.sonota {
	width: 720px;
	margin: 0 auto 60px !important;
}

.teisyokuMenu.bento .menus:before {
	display: none;
}

#cc01 .ccInner.y .inner {
	background-image: none;
}

#second .inner .ccWrap .ccInner.y .inner {
	padding: 60px;
}

.contactBtny a {
	display: block;
	text-align: center;
	font-size: 30px;
	background-color: #f29b76;
	color: #FFF;
	padding: 20px 0;
	border-radius: 20px;
}

.contactBtny a span {
	font-size: 22px;
	display: block;
}

.teisyokuMenu .menus p.greenLeft {
	margin: -20px 0 30px;
	font-size: 30px;
	color: #02756f;
	text-shadow: 
    0.2px 0 0 #02756f, 
    -0.2px 0 0 #02756f, 
    0 0.2px 0 #02756f, 
    0 -0.2px 0 #02756f;
 background-color: transparent;
}


.teisyokuMenu .menus p.greenLeft span {
	font-size: 36px;
}

.teisyokuMenu .menus p.greenLeft:before {
	display: none;
}

.contactBtny2 a {
	display: block;
	text-align: center;
	font-size: 30px;
	background-color: #58b8ae;
	color: #FFF;
	padding: 20px 0;
	border-radius: 20px;
}

.contactBtny2 a span {
	font-size: 22px;
	display: block;
}

.yAccess {
	margin: 0 0 100px;
	display: flex;
	justify-content: space-between;
}

.yAccess .map {
	width: 600px;
}

.yAccess .map iframe {
	margin: 0 0 20px;
}

.yAccess .map p {
	margin: 0 0 20px;
}

.yAccess .shop {
	display: flex;
	justify-content: space-between;
	gap: 40px;
}

.yAccess .shop1 {
	width: 256px;
	text-align: center;
}

.yAccess .shop2 {
	width: 256px;
	text-align: center;
}


/*company--------------------------------------------------*/
.greeting {
	margin: 0 0 140px;
	display: flex;
	justify-content: space-between;
}

.greeting .photo {
	width: 357px;
	margin-right: 50px;
}

.greeting .photo img {
	max-width: none;
}

.greeting .text {
}

.greeting .text .sig {
	margin: 20px 0 0;
	text-align: right;
}

.aboutWrap {
	margin: 0 0 40px;
	padding: 60px 0;
	border-radius: 30px;
	background-color: #e2f3f3;
}

#second .aboutWrap .inner {
	width: 790px;
	margin: 0 auto;
}

.aboutWrap .inner table {
 width: 100%;
	margin: 0 0 60px;
 border-collapse: separate;
 overflow: hidden;
 border-spacing: 0;
 border-radius: 10px;
 text-align: center;
 border: 1px solid #434343;
}

.aboutWrap .inner table th, .aboutWrap .inner table td {
  padding: 0.6em 2em;
  vertical-align: middle;
  border-right: 1px solid #434343;
  border-bottom: 1px solid #434343;
}

.aboutWrap .inner table th:last-child, .aboutWrap .inner table td:last-child {
  border-right: none;
}

.aboutWrap .inner table tr:last-child th, .aboutWrap .inner table tr:last-child td {
  border-bottom: none;
}

.aboutWrap .inner table th {
  background: #eee;
		font-weight: normal;
		width: 190px;
}

.aboutWrap .inner table td {
  background: #fff;
		text-align: left;
}

/*qa*/
.qa {
	width: 840px;
	margin: 30px auto 80px;
}

.qa dt {
	position: relative;
	margin: 0 0 20px;
	padding: 0 0 0 50px;
}

.qa dt:before {
	position: absolute;
	top: -6px;
	left: 0;
	background: url(../image/q.png) no-repeat 0 0;
	content: "";
	width: 40px;
	height: 40px;	
}

.qa dd {
	position: relative;
	margin: 0 0 50px;
	color: #02756f;
	padding: 0 0 0 50px;
}

.qa dd:before {
	position: absolute;
	top: -6px;
	left: 0;
	background: url(../image/a.png) no-repeat 0 0;
	content: "";
	width: 40px;
	height: 40px;	
}


/*access*/
.accessInner {
	width: 1100px;
	margin: 0 auto;
}

.gmap {
	width: 1100px;
	margin: 0 auto 20px;
}

.accessTit {
	margin: 0 0 10px;
	font-size: 30px;
		text-shadow: 
    0.2px 0 0 #000, 
    -0.2px 0 0 #000, 
    0 0.2px 0 #000, 
    0 -0.2px 0 #000;
}

.comp {
	display: flex;
	justify-content: space-between;
}

.comp .photo {
	width: 450px;
}

.comp .text dl {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 20px;
}

.comp .text dl dt {
	width: 80px;
}

.comp .text dl dd {
	width: calc( 100% - 80px);
}

.comp .text p {
	margin: 0 0 20px;
}

.comp .text p.how {
	margin: 0 0 10px;
	background-color: #02756f;
	display: inline-block;
	padding: 0 16px;
	border-radius: 100vh;
	color: #FFF;
}

p.howTel {
	margin: 30px 0 60px !important;
	font-size: 20px;
	line-height: 1.6;
	color: #02756f;
}

.comp .text ul {
	margin: 0 0 20px 30px;
	list-style: disc;
}

dl.accessDl {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 20px;
}

dl.accessDl dt {
	width: 80px;
}

dl.accessDl dd {
	width: calc( 100% - 80px);
}

dl.accessDl2 {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 80px;
}

dl.accessDl2 dt {
	width: 280px;
	margin: 0 0 10px;
}

dl.accessDl2 dd {
	width: calc( 100% - 280px);
	margin: 0 0 10px;
}


/*--------------------------------------------------------------------------------------------------

   page---

--------------------------------------------------------------------------------------------------*/


@media (max-width: 1230px){


.hero.section.sp .hero-animation {
	width: 100%;
	height: auto;
}

.ratio-1_1:before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 */
				margin-bottom: -140px;
}

.ratio-1_1 .inner {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

.ratio-1_1 .inner .img1{
	animation-delay:1s;
	top: 0;
	right: 5%;
}

.ratio-1_1 .inner .img2{
	animation-delay:2s;
	top: 240px;
	left: 0;
}

.ratio-1_1 .inner .img3{
	animation-delay:3s;
	top: 150px;
	left: 0;
}

.ratio-1_1 .inner .img4{
	animation-delay:4s;
	bottom:120px;
	left: 0;
 width: 380px;
}

.ratio-1_1 .inner .img5{
	animation-delay: 5s;
	top: 30px;
	left: 20%;
}

.service-card {
	padding: 30px 20px;
}

.service-card__body h2, .wide-banner__text h2 {
	font-size: 20px;
}

.service-card__body p, .wide-banner__text p {
	line-height: 1.5;
	font-size: 14px;
}

.service-card__logo {
	margin-right: 0;
	width: 120px;
}

.service-card__logo img {
	max-width: 120px;
}

.cards-grid .arrow {
	bottom: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	padding: 0;
}

.wide-banner {
	position: relative;
	width: 90%;
	margin: 0 auto;
	padding: 60px 20px 0;
	background: url(../image/index_yuzuriha_back_sp.png) no-repeat 0 0;
	background-size: cover;
	display: block;
	min-height: 220px;
	border-radius: 20px;
}

.wide-banner__text {
	max-width: 240px;
}

.wide-banner div.illust {
	margin: 0;
	position: absolute;
	left: 60%;
	bottom: 30px;
}

.wide-banner .arrow {
	bottom: 30px;
	left: 85%;
	width: 40px;
	height: 40px;
	padding: 0;
}

.section-heading h2 {
	font-size: 34px;
}

.news-list {
	width: 90%;
	margin: 0 auto;
	line-height: 1.5;
}

.news-item time {
	display: block;
}

.news-button .btn {
	width: 90%;
}

.news-button .btn {
	height: inherit;
	padding: 8px 0;
	font-size: 16px;
}


/*news--------------------------------------------------*/
.newsWrap {
	display: block;
}

.newsWrap .all {
	width: 100%;
}

.newsWrap .all ul.cat {
	flex-wrap: wrap;
	gap: 0;
	justify-content: space-between;
}

.newsWrap .all ul.cat li {
	width: 48%;
	margin: 0 0 10px;
}

.newsWrap .all ul.cat li a {
	width: 100%;
}

.newsWrap .archive {
	width: 100%;
}

.newsWrap .info {
	width: 90%;
	margin: 0 auto;
}

.newsWrap .all {
margin-bottom: 30px;
}

/*tomony--------------------------------------------------*/
#second .inner .ccWrap {
	margin: 0 0 60px;
}

#second .inner .ccWrap .ccInner .inner {
	padding: 30px 20px 100px;
}

#cc01 .ccInner .inner {
	background-position: center 98%;
	background-size: 140px;
}

#cc02 .ccInner .inner {
	padding: 30px 20px 60px !important;
	background-position: center 96%;
	background-size: 150px;
}

#cc03 .ccInner .inner {
	padding: 30px 20px 80px !important;
	background-position: 55% 96%;
	background-size: 160px;
}

#cc04 .ccInner .inner {
	padding: 30px 20px 80px !important;
	background-position: 55% 98%;
	background-size: 140px;
}


.ccInner .inner h3 {
	font-size: 26px;
	display: block;
	line-height: 1.6;
}

.ccInner .inner h3 span {
	margin: 0;
	display: block;
}

.ccInner .inner .clm2 {
	display: block;
}

.ccInner .inner .clm2 .photo {
	width: 100%;
}

.ccInner .inner .clm2 .text {
	width: 100%;
	margin: 10px 0 0;
}

.ccInner .inner .clm2 .text dt {
	font-size: 22px;
	margin: 0;
}

.ccInner .inner .clm2 .text dd {
	font-size: 18px;
	line-height: 1.6;
}

.ccBtn {
	width: 100%;
}

.contactBtn a {
	font-size: 24px;
}

.contactBtn a span {
	font-size: 18px;
}


/*kizuna*/
.clm2-k {
	display: block;
}

.clm2-k div {
	width: 100%;
	margin: 0 0 20px;
}

.clm2-k div h3 {
	font-size: 26px;
	background-position: 0 8px;
}

#second .inner .pageNavi-k {
	width: 330px;
	display: block;
	margin: 0 auto 60px;
}

#second .inner .pageNavi-k li {
	margin: 0 0 16px;
}

.ccInner.k .inner h3 {
	text-align: center;
}

.ccInner.k .inner .sub {
	font-size: 20px;
}

.kizunaStep {
	width: 100%;
}

.kizunaStep dt {
	margin-bottom: 10px;
}

.kizunaStep dd {
	line-height: 1.4;
}

.kizunaStep li:nth-child(6) {
	background-size: 120px;
}

.contactBtnk {
	margin: 0 0 140px;
}

.contactBtnk a {
	font-size: 24px;
}

.contactBtnk a span {
	font-size: 18px;
}

/*yuzuriha*/
.pageNavi-y {
	width: 251px;
	display: block;
	margin: 0 auto 40px;
}

.pageNavi-y li {
	margin-bottom: 20px;
}

.ccInner .inner h3 {
	text-align: center;
}

.greenCenter {
	font-size: 22px;
}

.greenCenter span {
	font-size: 28px;
}

.teisyokuMenu {
	flex-direction: column;
}

.teisyokuMenu .photo {
	width: 100%;
	order: 1;
	margin: 0 0 20px;
}

.teisyokuMenu .menus {
	width: 100%;
	order: 2;
}

.teisyokuMenu .photo:before {
	width: 100px;
	height: 113px;
	bottom: 0;
	right: 0;
	background-size: 100px;
}

.teisyokuMenu .menus p {
	font-size: 16px;
	margin: 0 0 40px;
	text-align: center;
}

#second .inner .ccWrap .ccInner.y .inner {
	padding: 60px 20px;
}

.teisyokuMenu .menus li a {
	font-size: 18px;
}

.teisyokuMenu .menus li a .arrow {
	width: 38px;
	height: 38px;
	bottom: -6px;
	line-height: 1.2;
}

.teisyokuPop li {
	width: 48%;
}

.teisyokuPop li img.pc {
	display: none;
}

.teisyokuPop li img.sp {
	display: block;
}

.contactBtny a {
	font-size: 24px;
	line-height: 1.4;
}

.contactBtny a span {
	font-size: 18px;
}

.teisyokuMenu .photo:before {
	display: none;
}

.teisyokuMenu .photo2 .sp{
	margin: 20px auto 40px;
	width: 160px;
	height: auto;
}

.contactBtny2 a {
	font-size: 24px;
}

.contactBtny2 a span {
	font-size: 18px;
}

.yAccess {
	display: block;
	margin: 0 20px 20px;
}

.yAccess .map {
	width: 100%;
}

.yAccess .map iframe {
	width: 100%;
}

.yAccess .shop {
	justify-content: center;
	gap: 20px;
}

.accessSp {
	margin: 0 20px 20px;
}

.accessSp2 {
	margin: 0 20px 100px;
}

.teisyokuMenu .menus:before {
	display: none;
}

.teisyokuMenu .photo .comment {
	display: block;
}

.teisyokuMenu .photo .comment .greenCenter {
	text-align: center;
	margin: 0 0 20px;
}

.teisyokuMenu .photo .comment .lead04 {
	text-align: center;
}

.teisyokuPop {
	width: 100%;
}

.sonota {
	width: 100%;
}


/*company--------------------------------------------------*/
.greeting {
	margin: 0 30px 100px;
	display: block;
}

.greeting .photo {
	width: 200px;
	margin: 0 auto;
}

.greeting .photo img {
	display: block;
	width: 200px;
	height: auto;
	margin: 0 auto 20px !important;
}

#second .aboutWrap .inner {
	width: 90%;
}

.aboutWrap .inner table th {
	width: 120px;
	white-space: nowrap;
}

.aboutWrap .inner table th, .aboutWrap .inner table td {
	padding: 0.6em 0.5em;
}

/*qa*/
.qa {
	width: 90%;
	margin: 30px auto 80px;
}

.qa dt:before {
	top: 0;
}

.qa dd:before {
	top: 0;
}

/*access--------------------------------------------------*/
.accessInner, .accessInner .gmap {
	width: 100%;
}

.accessInner .gmap iframe {
	width: 100%;
}

.accessTit {
	font-size: 22px;
}

.comp {
	flex-wrap: wrap;
}

.comp .text {
	order: 2;
	width: 100%;
}

.comp .photo {
	order: 1;
	width: 100%;
	margin: 0 0 10px;
}

dl.accessDl2 {
	display: block;
}

dl.accessDl2 dt {
	width: 100%;
	margin: 0;
}

dl.accessDl2 dd {
	width: 100%;
}









}


@media (max-width: 1000px){

.ratio-1_1:before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 */
				padding-bottom: 200px;
				margin-bottom: 0;
}

.ratio-1_1 .inner {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

.ratio-1_1 .inner .img4{
 bottom: 80px;
}

.cards-grid {
	display: block;
	width: 90%;
	margin:0 auto;
}

.service-card {
	width: 100%;
	margin: 0 0 40px;
}


}

@media (max-width: 770px){

.ratio-1_1:before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 */
				padding-bottom: 300px;
				margin-bottom: 0;
}

.ratio-1_1 .inner {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

.ratio-1_1 .inner .img1{
 width: 120px;
	top: 20px;
}

.ratio-1_1 .inner .img4{
 width: 300px;
}

.ratio-1_1 .inner .img5{
	width: 70px;
}


}


@media (max-width: 520px){

.ratio-1_1 .inner .img1{
	width: 80px;
	right: 8%;
}

.ratio-1_1 .inner .img4{
	bottom: -20px;
}

.cards-grid {
	width: 100%;
}

.cards-grid .arrow {
	right: 10px;
}

.wide-banner {
	width: 100%;
}

.sps {
	display: block;
}


/*index--------------------------------------------------*/

.cards-grid .arrow {
	line-height: 1.7;
}

.wide-banner .arrow {
	line-height: 1.7;
}

.service-card__body h2, .wide-banner__text h2 {
	font-size: 18px;
}

.service-card__logo {
	width: 70px;
}

.service-card__logo img {
	max-width: 70px;
}

.wide-banner div.illust {
	left: 66%;
}

.wide-banner div.illust img {
	width: 60px;
	height: auto;
}


/*access--------------------------------------------------*/

p.howTel {
	font-size: 18px;
}


/*kizuna--------------------------------------------------*/

.kizunaStep li:nth-child(6) {
	background-size: 80px;
}

.kizunaStep li div {
	width: 50px;
}

.kizunaStep li dl {
	width: calc( 100% - 50px );
}

.clm2-k div h3 {
	line-height: 1.4;
	background-position: 0 3px;
}


}