@charset "utf-8";
/*
Theme Name: 介護タクシー こっこ
Theme URI: https://www.cocco-taxi.com/
Version: 1.0
Tags: 
-------------------------------------------------------------- */

@font-face {
	font-family: "myfont";
	src: url("./font/UDDigiKyokashoN-R_0.ttc") format("opentype");
}

/**
 * カスタムプロパティ（共通CSS 変数設定）
**/
:root {
	/*幅設定（縦横使用可能）*/
	--margin_xl: 8vw; /*使用するときはvar(--margin_xl);です。 */
	--margin_l: 5vw;   /*使用するときはvar(--margin_l);です。  */
	--margin_m: 3vw;   /*使用するときはvar(--margin_m);です。  */
	--margin_s: 2vw;   /*使用するときはvar(--margin_s);です。  */
	--margin_xs: 1vw;  /*使用するときはvar(--margin_xs);です。 */

	/*フォントサイズ設定*/
	--fs_h1: 60pt; /*使用するときはvar(--fs_h1);です。 */
	--fs_h2: 50pt; /*使用するときはvar(--fs_h2);です。 */
	--fs_h3: 35pt; /*使用するときはvar(--fs_h3);です。 */
	--fs_h4: 25pt; /*使用するときはvar(--fs_h4);です。 */
	--fs_h5: 20pt; /*使用するときはvar(--fs_h5);です。 */
	--fs_h6: 15pt; /*使用するときはvar(--fs_h6);です。 */
	@media screen and (max-width: 768px) {
		--fs_h1: 30pt; /*使用するときはvar(--fs_h1);です。 */
		--fs_h2: 25pt; /*使用するときはvar(--fs_h2);です。 */
		--fs_h3: 20pt; /*使用するときはvar(--fs_h3);です。 */
		--fs_h4: 15pt; /*使用するときはvar(--fs_h4);です。 */
		--fs_h5: 12pt; /*使用するときはvar(--fs_h5);です。 */
		--fs_h6: 10pt; /*使用するときはvar(--fs_h6);です。 */
	}
}

* {
	margin: 0;
	padding: 0;
	letter-spacing: 2px;
	line-height: 1.8em;
	font-family: 'myfont', sans-serif;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	font-weight: bold;
}

html{
	max-height: 100%;
	scroll-behavior: smooth;
}


*,
*:before,
*:after {
  box-sizing: border-box;
}


body {
	color: #262626;
	background: rgba(236, 231, 207, 1);
	font-weight: normal;
}


header h1 img  {
	width: 70%;
	margin: 20px auto;
	display: block;
}

footer {
	position: relative;
/*	height: 45vh;*/
	background: linear-gradient(0deg, rgb(29, 163, 137), rgb(236, 231, 207) 100%);
}

footer p.copy {
/*	position: absolute;*/
	bottom: 0;
	font-size: 8pt;
	width: 100%;
	display: block;
	text-align: center;
	margin: 40px 0 0 0;
}

footer section p.tit img  {
	width: 100%;
	margin: 20px auto 0;
}

section {
	width: 90%;
	margin: 0 auto;
}

section p {
	width: 93%;
	margin: 0 auto;
}


div.line_wa {
	width: 90%;
	border-top: 2px solid #1d512b;/**/
	background: url(img/line_saku.svg) no-repeat center center / 80%;
	margin: 0 auto;
	height: 14vh;
}

section.price p span {
	font-size: 16pt;
}

section.price p span em {
	color: #f00;
	font-style: normal;
}

/*　スマホ
----------------------------------------*/
@media screen and (max-width: 767px) {
	.pcn {
		display: none;
	}

	.spn {
		display: block;
	}

	h3 {
		border-bottom: 2px solid #1d512b;
		background: url(img/piyo.svg) no-repeat right bottom/ 8%;
	}

	h3 img {
		width: 50%;
		margin: 0;
	}
/*-----------  hero  -------------*/

	section.hero {
		margin: 0;
		width: 100%;
		position:relative;
	}

	section.hero img.tit {
		position: absolute;
		z-index:105;
		display: block;
		width: 80%;
		bottom: 15px;
        	left: 15px;
	}

	section.hero img.sld {
		z-index:3;
		width: 100%;
		display: block;
	}

	.viewer {
		margin: 0 auto;
		width: 100%;
		position: relative;
		overflow: hidden;
	}

	.viewer ul {
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	.viewer ul li {
		top: 0;
		left: 0;
		width: 100%;
		position: absolute;
	}

	.viewer ul li img {
		width: 100%;
	}

	.viewer ul:after {
		content: ".";
		height: 0;
		clear: both;
		display: block;
		visibility: hidden;
	}

	.viewer ul {
		display: inline-block;
		overflow: hidden;
	}


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

/*-----------  各コーナー共通  ------*/
	section.info,
	section.message,
	section.price {
		width: 90%;
	}

/*-----------  message  -------------*/
	section.info {
		margin: 40px auto 0;
		display: block;
	}

/*-----------  message  -------------*/
	section.message {
		margin: 0px auto;
		display: block;
	}

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

	footer {
		position: relative;
		height: 45vh;
		background: linear-gradient(0deg, rgb(29, 163, 137), rgb(236, 231, 207) 100%);
	}

	footer section p.tel,
	footer section p.tel a {
		font-size: 20pt;
		color: #f00;
	}

	footer section p.tel span.fax {
		color: #000;
	}

	footer section p.tel span {
		display: block;
		margin: -10px 0 0 0;
		font-size: 12pt;
	}

	footer section p.add {
		margin: 10px auto 20px;
		line-height: 1em;
	}

}


/*　タブレット
----------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1200px) {

	.pcn {
		display: block;
	}

	.spn {
		display: none;
	}

	h3 {
		border-bottom: 2px solid #1d512b;
		background: url(img/piyo.svg) no-repeat right bottom/ 5%;
		margin: 30px auto;
	}

	h3 img {
		width: 30%;
		margin: 0;
	}

	main {
		font-size: 18pt;
		width: 80%;
		margin: 0 auto;
	}

	div.line_wa {
		margin: 30px auto;
	}

/*-----------  hero  -------------*/

	section.hero {
		margin: 0;
		width: 100%;
		position:relative;
	}

	section.hero img.tit {
		position: absolute;
		z-index:105;
		display: block;
		width: 80%;
		bottom: 15px;
        	left: 15px;
	}

	section.hero img.sld {
		z-index:3;
		width: 100%;
		display: block;
	}

	.viewer {
		margin: 0 auto;
		width: 100%;
		position: relative;
		overflow: hidden;
	}

	.viewer ul {
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	.viewer ul li {
		top: 0;
		left: 0;
		width: 100%;
		position: absolute;
	}

	.viewer ul li img {
		width: 100%;
	}

	.viewer ul:after {
		content: ".";
		height: 0;
		clear: both;
		display: block;
		visibility: hidden;
	}

	.viewer ul {
		display: inline-block;
		overflow: hidden;
	}


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

/*-----------  各コーナー共通  ------*/
	section.info,
	section.message,
	section.price {
		width: 90%;
	}

/*-----------  info  -------------*/
	section.info {
		margin: 40px auto 0;
		display: block;
	}

/*-----------  message  -------------*/
	section.message {
		margin: 0px auto;
		display: block;
	}

/*-----------  price  -------------*/
	section.price h3 cute {
		float: right;
		text-align: right;
		display: block;
		margin: auto 60px 0 0;
	}

	section.price p {
		display: block;
		margin: 0px auto;
	}

	section.price p span em {
		font-size: 36pt;
	}

	section.price p span.l_p {
		font-size: 20pt;
		float: left;
	}

	section.price p span.r_p {
		float: right;
	}

	section.price p span.cl {
		display: block;
		clear: both;
	}
/*--------------------------------------*/

	footer {
		position: relative;
/*		height: 45vh;*/
		background: linear-gradient(0deg, rgb(29, 163, 137), rgb(236, 231, 207) 100%);
	}

	footer section {
		width: 80%;
		margin: 0 auto;
	}

	footer section p.tit img {
		width: 80%;
	}

	footer section p.tel,
	footer section p.tel a {
		font-size: 36pt;
		color: #f00;
	}

	footer section p.tel span.fax {
		font-size: 20pt;
		color: #000;
	}

	footer section p.tel span {
		display: block;
		margin: -10px 0 0 0;
	}

	footer section p.add {
		margin: 10px auto 20px;
		font-size: 20pt;
		line-height: 1em;
	}

	footer p.copy {
		clear: both;
	}
}


/*　PC
----------------------------------------*/
@media screen and (min-width: 1200px) {

	.pcn {
		display: block;
	}

	.spn {
		display: none;
	}

	h3 {
		border-bottom: 2px solid #1d512b;
		background: url(img/piyo.svg) no-repeat right bottom/ 5%;
		margin: 30px auto;
	}

	h3 img {
		width: 30%;
		margin: 0;
	}

	main {
		font-size: 18pt;
		width: 80%;
		margin: 0 auto;
	}

	div.line_wa {
		margin: 30px auto;
	}

/*-----------  hero  -------------*/

	section.hero {
		margin: 0;
		width: 100%;
		position:relative;
	}

	section.hero img.tit {
		position: absolute;
		z-index:105;
		display: block;
		width: 80%;
		bottom: 15px;
        	left: 15px;
	}

	section.hero img.sld {
		z-index:3;
		width: 100%;
		display: block;
	}

	.viewer {
		margin: 0 auto;
		width: 100%;
		position: relative;
		overflow: hidden;
	}

	.viewer ul {
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	.viewer ul li {
		top: 0;
		left: 0;
		width: 100%;
		position: absolute;
	}

	.viewer ul li img {
		width: 100%;
	}

	.viewer ul:after {
		content: ".";
		height: 0;
		clear: both;
		display: block;
		visibility: hidden;
	}

	.viewer ul {
		display: inline-block;
		overflow: hidden;
	}


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

/*-----------  各コーナー共通  ------*/
	section.info,
	section.message,
	section.price {
		width: 90%;
	}

/*-----------  info  -------------*/
	section.info {
		margin: 40px auto 0;
		display: block;
	}

/*-----------  message  -------------*/
	section.message {
		margin: 0px auto;
		display: block;
	}

/*-----------  price  -------------*/
	section.price h3 cute {
		float: right;
		text-align: right;
		display: block;
		margin: auto 60px 0 0;
	}

	section.price p {
		display: block;
		margin: 0px auto;
	}

	section.price p span em {
		font-size: 36pt;
	}

	section.price p span.l_p {
		font-size: 20pt;
		float: left;
	}

	section.price p span.r_p {
		float: right;
	}

	section.price p span.cl {
		display: block;
		clear: both;
	}
/*--------------------------------------*/

	footer {
		position: relative;
/*		height: 45vh;*/
		background: linear-gradient(0deg, rgb(29, 163, 137), rgb(236, 231, 207) 100%);
	}

	footer section {
		width: 80%;
		margin: 0 auto;
	}

	footer section p.tit img {
		width: 80%;
	}

	footer section p.tel,
	footer section p.tel a {
		font-size: 36pt;
		color: #f00;
	}

	footer section p.tel span.fax {
		font-size: 20pt;
		color: #000;
	}

	footer section p.tel span {
		display: block;
		margin: -10px 0 0 0;
	}

	footer section p.add {
		margin: 10px auto 20px;
		font-size: 20pt;
		line-height: 1em;
	}

	footer p.copy {
		clear: both;
	}
}