@charset "UTF-8";
/* CSS Document */

@media screen and (max-width: 766px) { /*ウィンドウ幅が767px以上の場合に適用*/

	header {
		overflow: hidden;
		margin:0 auto;
		width:100%;
	}
	
	h1 {
		text-align: center;
		font-size:0.8em;
		padding:0.5em 0;
		background-color: #2A3455;
		color:#FFF;
		font-weight: normal;
	}
		h2 {
			font-size: 1.5em;
			line-height: 1.5;
			text-align: center;
			letter-spacing: 0.1em;
		}
		
		h2 span {
			display: block;
			font-size: 0.4em;
			font-weight: normal;
			margin-top: 0.8em;
			margin-bottom:3em;
	}
	.HeadWrap {
		overflow: hidden;
		margin:0 auto;
		width:92%;
	}

	.TopRogo {
		width:34%;
		float:left;
		padding:3%;
	}

	.TopRogo p {
		width:100%;
		font-size: 12px;
		color:#000;
		text-align: center;
		margin-bottom:0.5em;
	}
	
	.Caractor {
		float:left;
		width:30%;
	}
	
	.Caractor > img{
		width:28%;
	}

	.FirstView {
		background-color: black;
		width:100%;
	}



/*  Achievements Start  */			
		#Achievements {
			padding:50px 0;
		}
		
		.scroll-infinity__wrap {
			display: flex;
			overflow: hidden;
		}
		
		.scroll-infinity__list {
			display: flex;
			list-style: none;
			padding: 0
		}
		
		.scroll-infinity__list--left {
			animation: infinity-scroll-left 20s infinite linear 0.5s both;
		}
		
		.scroll-infinity__item {
			width: calc(200vw / 4);
			margin-right:20px;
		}
		
		.scroll-infinity__item>img {
			width: 100%;
		}		
/*  Achievements End  */	
		
		
/*  TroubleArea Start  */	

		#Trouble {
			width:100%;
			padding:50px 0;
			background: linear-gradient(350deg,transparent 0%,transparent 65%,#4fc1c0 65%,#4fc1c0 100%);
		}
		.top {
			background-color:#4fc1c0;
			padding-bottom:10px;
			background-image:url("../images/common/bottom_bg.png");
			background-position:bottom;
			background-size:600px;
			background-repeat: repeat-x;		}

		.TroubleBox {
			border:1px solid #4fc1c0;
			border-radius:10px;
			padding:10px 5%;
			background-color:#FFF;
		}

		.TroubleBox > dt {
			border-bottom:1px solid #000;
			margin-bottom:10px;
			text-align: center;
			font-size: 1.2em;
			padding-bottom:0.5em;
		}
		.TroubleBox > dd > p {
			line-height:1.5;
			font-size:0.9em;
		}
		
		.ToubleList {
			width:90%;
			margin:0 auto;
			margin-bottom:100px;
		}
		.ToubleList > li {
			width:100%;
			margin-bottom:20px;
		}
		
		.last {
			width: 100%;
			margin:50px auto;
		}
		


		.CaseFrame {
			margin:0 auto;
			border-spacing: 0px 1em;
			margin-bottom:1em;
			width:92%;

	}
		.CaseFrame th {
    		width: 16%;
			height:40px;
    		border-left: solid 1px;
    		border-top: solid 1px;
    		border-bottom: solid 1px;
    		font-weight: normal;
    		text-align: center;
    		font-size: 0.7em;
			padding:0 1%;
		}
		.CaseFrame td {
			width:75%;
    		border-right: solid 1px;
    		border-top: solid 1px;
    		border-bottom: solid 1px;
			padding-left:1em;
			font-size:0.7em;
    		text-align: left;
		}	
		.QA {
			padding:0.5em 0;
		}
		.SizeT07 { font-size:0.7em; }

		.Question {
		}
		.Answer {
		}	
		.Question::before {
			content: "Q "; /* 好きな記号をここに設定します */
			font-size: 1em; /* 記号のサイズを調整します */
			font-weight: bold; /* 記号の太さを調整します */
			color:red;
		}
		
		.Answer::before {
  			content:"A "; /* 好きな記号をここに設定します */
			font-size: 1em; /* 記号のサイズを調整します */
			font-weight: bold; /* 記号の太さを調整します */
			color:blue;
		}
	.e {
		font-size:2em;
	}
		
/*  TroubleArea End  */	

/*  PriceArea Start  */	
		
		#PriceArea {
			width:100%;
		}
		
		.PriceMain{
			padding:50px 0;
			background-image:url("../images/common/bottom_bg.png");
			background-position:bottom;
			background-size:500px;
			background-repeat: repeat-x;
		}
		
		.PriceMain > ul {
			width:92%;
			margin:0 auto;
			overflow:hidden;
		}
		
		.PriceMain > ul > li {
			margin-bottom:20px;
			float:left;
			width:48%;
		}
		.PriceMain > ul > li:nth-child(odd) {
			margin-right:4%;
		}
		.Accident{
			
		}
		.Accident dt {
			width:100%;
			padding:5px 0;
			margin-bottom: 20px;
			text-align: center;
			border-radius:20px;
			background-color:#ffff00;
			color:#000;
			font-size:0.8em;
		}

		.Accident dd {
			width:100%;
		}

		.Accident > dd > p {
			color:aliceblue;
			font-size:0.8em;
		}

		.ButtomSwitch {
			width:70%;
			margin:10px auto;
			background-color:#FFF;
			text-align:center;
			padding:10px 0;
			border-radius: 10px;
		}
		.Square02 {
			border:1px solid #FFF;
			padding:10px;
			width:70%;
			margin:0 auto;
			margin-bottom:40px;	
		}
		
		.PriceAll {
			width:100%;
			margin-bottom:50px;
		}
		
		.tab-container {
            width: 92%;
            margin-bottom: 1rem;
            margin:0 auto;
			padding-top:50px;
		}

  	    .tab-row {
            display: flex;
            justify-content: flex-start;
            gap: 1%;
            margin-bottom: 8px;
            width:100%;
		}

   		 .tab-row button {
            width:98%;
            margin:0 auto;
            background: #f0f0f0;
            cursor: pointer;
            transition: background 0.3s;
            font-size:1.5rem;
	    }

	    .tab-row button.active {
          background: #FF0000;
          color: white;
		}

		.tab-content {
			display: none;
			margin:0 auto;
			background-color: #fff;
			width:100%;
		}

		.tab-content.active {
			display: block;
			width:100%;		
		}
		
		.TableFrame {
			border-collapse: collapse;
			width: 100%;
		}
		.TableFrame th, .TableFrame td {
			border: 2px solid #fff;
			background-color: #F7F7F7;
			padding: 1em;
			font-size:0.7em;
		}

		.TableFrame th {
			background-color: #4fc1c0;
			color: #fff;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0.1em;
		}
		.TableFrame tr td {
			font-size:0.7em;	
}
	
		.TableFrame th:nth-child(1) {
			width: 40%;
		}
		
		.TableFrame th:nth-child(2) {
			width: 40%;
		}
		
		.TableFrame th:nth-child(3) {
			width: 20%;
		}
	
		.RepairPice {
			text-align: right;
	  	}
		
		.RepairTime {
			text-align: right;
			width:15%;
		}		
/*  PriceArea End  */

/*  CampaignArea Start  */
		
		#CampaignArea {
			width:92%;
			background-color: #ff0000;
			background-image: url("../images/common/camp_bg.jpg");
			background-size:cover;
			background-repeat:no-repeat;
			background-position: 50%;
			padding:50px 4%;
					}
		
		#CampaignArea p {
			margin:30px 0;
		}
		
		#CampaignArea img {
			margin:0 auto;
			display: block;
		}

/*  CampaignArea End  */

		
/*  FrowArea Start  */
		
		#FrowArea {
			width:100%;
			background-color: #FFF;
			padding:50px 0;			
		}
		.wrapArea {
			width:92%;
			margin:0 auto;
		}

		.centerA {
			width:880px;
			overflow: hidden;
		}

		.centerA > .left {
			width:400px;
			float:left
		}
		.centerA > .right {
			width:400px;
			float:right;
		}
		.ttl {
			width: 100%;
			height:60px;
			position: relative;
			color: #fff;
			text-align: center;
			background-color: #4fc1c0;
			margin-bottom:30px;
			padding:10px 0;
			font-size:1.2em;
		}
		.title {
			background-color: yellow;
			border-radius: 10px ;
			color:#000000;
			padding:5px 40px;
			font-size:16px;
			margin-bottom:50px;
		}
		.LineHeight {
			line-height: 60px;
		}
		.sub {
			font-size:0.7em;
			padding-bottom:0.6em;
		}
		.ttl:nth-child(-n+4)::after {
			width: 0;
			height: 0;
			position: absolute;
			top: 100%;
			left: 50%;
			margin: 0 0 0 -20px;
			border: 20px solid transparent;
			border-top-color: #4fc1c0;
			content: '';
		}

		.Square {
			border:1px solid #000;
			padding:10px 0;
			width:80%;
			margin:0 auto;
			margin-bottom:30px;
			border-radius:10px;
		}
		
/*  FrowArea End  */		
		
/*  PointArea Start  */		
		
		#Point {
			background-color: #2A3455;
			color:#ECE5E5;;
			width:100%;
			padding:50px 0;
			background-image:url("../images/common/bottom_bg.png");
			background-position:bottom;
			background-size:450px;
			background-repeat: repeat-x;
	}
		
		.PointList {
			width:92%;
			margin:0 auto;
			display: table;
			border-bottom:1px solid #FFFFFF;
			padding:1em 0;
			overflow: hidden;
		}

		.Num {
			float:left;
			width:75px;
			height:75px;
			text-align: center;
			color:#000;
			font-size: 2em;
			line-height:75px;
		}
		
		.Word {
			float:left;
			width:70%;
			display: table-cell;
			vertical-align: middle;
			margin-left:20px;
		}
		.Title {
			font-size: 1.4em;
			line-height: 1.5em;
			}
		.SubTitle {
			color:#FFF;
			font-size: 1em;
		}
		.Explanation {
			color:#FFF;
			font-size: 1em;
		}
		
/*  PointArea Start  */			
		
/*  MapArea Start  */			
		#Map {
			width:100%;
			padding:50px 0;
		}
		.WrapWhite {
			width:92%;
			margin:0 auto;
		}

		.WrapWhite > p{
			text-align:justify;
			font-size:0.9em;
			line-height: 1.5;
		}

		.root {
			overflow: hidden;
		  	display: flex;
			overflow-x: scroll;
		}

		.root li {
			width:100%;
			float:left;
			margin-right:30px;
  			flex-shrink: 0;
		}

		.center {
			text-align: center;
			font-size: 1em;
		}
		
		h3 {
			width:90%;
			text-align: center;
			margin:2em auto;
			padding:0.5em;
			font-size:1.2em;
			font-weight: normal;
			border: 1px solid #000;
		}
		
		.ShopInfo {
			width:100%;
			margin:30px auto;
			
		}
		.ShopInfo li {
			width:100%;
		}

		.Accece {
			width:100%;
			display: table;
			overflow: hidden;
		}
		
		.AcceceTitle{
			width: 15%;
			height:40px;
			text-align: center;
			border:1px solid #000000;
			border-radius:5px;
			font-size:0.7em;
			line-height: 40px;
			float:left
		}
		
		.AcceceWord {
			width:83%;
			height:55px;
			font-size:0.7em;
			margin-left:1%;
			float:left;
		}
		.rogo {
			margin:50px 0;
		}
		
/*  MapArea End  */			
		
/*  QAArea Start  */				
		.qa {
			width:100%;
			background-color: #4fc1c0;
			padding:50px 0;
			background-image:url("../images/common/bottom_bg.png");
			background-position:bottom;
			background-size:600px;
			background-repeat: repeat-x;
		}
		
		.black {
			display: block;
			font-size: 1em;
			font-weight: normal;
			margin-top: 0.2em;
			margin-bottom:0.5em;
			color:aliceblue;
		}
		
		.QaWrap {
			width:92%;
			background-color: #FFF;
			border-radius: 20px;
			padding:20px 0;
			margin:0 auto;
		}
		
		.QaList {
			width:92%;
			border:1px solid #000000;
			margin:0 auto;
			border-radius: 10px;
			margin-bottom:30px;
		}
		.QaList:last-child {
			margin-bottom:0;
		}		
		.QaList dt {
			padding:10px 20px;
			background-color: #2A3455;
			border-radius:10px 10px 0 0 ;
			color:aliceblue;
			text-size:0.7em;
			text-align: justify;
		}
		
		.QaList dd {
			padding:10px 20px;
			text-size:0.7em;
			text-align: justify;
		}
/*  QAArea End  */
		
/*  FooterArea Start  */			
		footer {
			width:100%;
			background-color: #2A3455;
		}
		
		footer p {
			color:aliceblue;
			font-size:0.9em;
			padding:1em;
			text-align: center;
		}
		
/*  FooterArea End  */			
/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
}
	.FixMenu {
		background-color:#ffff00;
		color:#333;
		text-align: center;
		padding:0.3em;
	}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 50%;
}



/*ボタンを調整*/
#sp-fixed-menu li a{
   display:block;
   width: 100%;
}
	
	
	
		.ShopFrame {
			margin:0 auto;
			border-spacing: 0px 0.5em;
			margin-bottom:1em;
	}
		.ShopFrame th {
    		width: 17%;
			height:40px;
    		border: solid 1px;
			border-radius:5px;
    		font-weight: normal;
    		text-align: center;
    		font-size: 0.7em;
		}
		.ShopFrame td {
			width:85%;
			padding-left:1em;
			font-size:0.7em;
		}	
	
	
	
	
}