@charset "utf-8";
/* CSS Document
ユーザーエージェントで表示を切り替えている都合上
ココは共通のコードのみとなっています。
カラム数や幅などの指定は[pc.css][sp.css]を編集してください。
*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@700&family=M+PLUS+1p:wght@800&family=M+PLUS+Rounded+1c:wght@800;900&family=Noto+Sans+JP:wght@800&display=swap');
/*
font-family: 'M PLUS 1 Code', monospace;
font-family: 'M PLUS 1p', sans-serif;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Noto Sans JP', sans-serif; */

:root {
  --color_blue: #1d55a8; /* var(--color_blue); *//*青*/
  --color_orange: #ec661a; /* var(--color_orange); *//*オレンジ*/
  --color_yellow: #ffe240; /* var(--color_yellow); *//*黄色*/
  --color_red: #cc0000; /* var(--color_red); *//*黄色*/
  --color_white: #ffffff; /* var(--color_white); *//*白色*/
  --color_light_blue: #e1f5fd; /* var(--color_light_blue); *//*水色[背景用]*/
  --color_text: #333333; /* var(--color_text); *//*水色[背景用]*/
  --ff_MP1C: 'M PLUS 1 Code', monospace; /* var(--ff_MP1C); */
  --ff_MP1p: 'M PLUS 1p', sans-serif; /* var(--ff_MP1p); */
  --ff_MPr1C: 'M PLUS Rounded 1c', sans-serif; /* var(--ff_MPr1C); */
  --ff_NotoSans: 'Noto Sans JP', sans-serif; /* var(--ff_NotoSans); */
}

* {box-sizing: border-box}
html,body {height: 100%;}
body {color: #333;}
body,header,footer,article,section,ul,ol,li,h1,h2,h3,h4,h5,p,figure,img {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  list-style: none;
}
dl,dt,dd {margin: 0;padding: 0}
figure,img {
  line-height: 0;
  max-width: 100%;
  height: auto;
}
section {position: relative}
a {
  text-decoration: none;
}
.bold {font-weight: bold}
.center {text-align: center}
.red {color: var(--color_red);}
.marker {
  display: inline-block;
  background:linear-gradient(transparent 50%, #ffe240 0%);
}
p.note, .note li {
  text-indent: -1em;
  margin-left: 1em;
}
p.note::before, .note li::before {content: "※";}


/*=============================================
ヘッダー
===============================================*/
header {
  background: var(--color_white);
}

/*=============================================
フッター
===============================================*/
footer {
  text-align: center;
  background: #000000;
  color: var(--color_white);
}
footer a {
  text-decoration: none;
  color: var(--color_white);
}
footer .footer_logo {
  text-align: center;
  padding: 2em 0;
}
footer .footer_nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/*------------------------------------------------
page-top
------------------------------------------------*/

.page-top-wrp {
}

.pageTop {
	display: none;
	text-align: right;
}
.pageTop a {
	position: fixed;
	bottom: 10px;
	width: 100px;
	display: inline-block;
	right: 20px;
  z-index: 9999;
}


/*=============================================
ページ内リンク
===============================================*/
.page_nav {
  background: var(--color_blue);
  padding: 0.75em 0 1.5em;
}
.page_nav ul {
  display: flex;justify-content: center;
}
.page_nav ul li:nth-child(n+2) {margin-left: 1em}
.page_nav a {
  position: relative;
  display: block;
  width: 7em;
  text-align: center;
  font-weight: bold;
  color: #FFF;
  border-bottom: solid 1px #FFF;
  letter-spacing: 0.1em;
}
.page_nav a::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.5em 1em;
  border-color: #FFF transparent transparent transparent;
  position: absolute;
  bottom: calc((1em + 3px) * -1);
  left: calc(50% - 1em);
}

.page_nav a:hover{color: var(--color_yellow);border-color: var(--color_yellow);}
.page_nav a:hover::after{border-top-color: var(--color_yellow);}


/*=============================================
（ページ内リンク下）メールフォームへのリンク
===============================================*/
.go_mailform a {
  color: var(--color_white);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.05em;
}
.go_mailform a i {font-size: 1.75em;margin-right: 0.5rem}

/*=============================================
CTI　クーポン/電話
===============================================*/
.coupon {
  background: #f7f0ea;
  text-align: center;
}

.tell {
  position: relative;
  background: #800f01;
  color: var(--color_white);
  overflow: hidden;
}
.tell .inner * {z-index: 5}

.tell h2 {text-shadow:2px 2px 5px rgba(0,0,0,0.3); }
.tell h2 span {color: var(--color_yellow);}

.tell ul {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff_MP1C);
}
.tell ul li {
  background: #d71618;
  color: var(--color_white);
  text-align: center;
}

.tell .tell_text {
  font-family: var(--ff_MP1p);
  letter-spacing: 0.05em;
  text-shadow:2px 2px 5px rgba(0,0,0,0.3); 
  animation: poyoyon 4.5s infinite forwards;
} 
@keyframes poyoyon {
  0% {
    transform: translateX(-140px);
    opacity: 0;
  }
  15% {
    transform: translateX(0);
    opacity: 1;
  }
  18% {
    transform: translateX(-50px);
    opacity: 1;
  }
  21% {
    transform: translateX(0);
    opacity: 1;
  }
  85% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(140px);
    opacity: 0;
  }
}
.tell .tell_text .min {
/*  color: var(--color_yellow);
  color: #fff;*/
  position: relative;
background-image: linear-gradient(
		-30deg,
		#ffff33  0%, 
		#ffff33  45%, 
		#fff 50%,
		#ffff33 55%,
		#ffff33 100% 
	  );
	  background-size: 500% 100%;
    background-clip: text;
  	-webkit-background-clip: text;
	  color: transparent;
    animation: shine 2s infinite;
    text-shadow: none;
}
.tell .tell_text .min:first-of-type {margin-right: 3px}
@keyframes shine {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.tell .tell_btn {
  display: block;
  background: linear-gradient(to bottom,#52a813,#7fcf45 15%,#86d54c 22%,#5eb039 41%,#106713 100%);
  font-weight: bold;
  font-family: var(--ff_MP1p);
  animation: yureru-j 2s infinite;
  color: var(--color_white);
}
.tell .tell_btn:hover {
  background: linear-gradient(to bottom,#52a813,#7fcf45 15%,#86d54c 22%,#5eb039 81%,#106713 100%);
}
/*
@keyframes yureru-j {
	0% {
		transform: translate(0px, 2%);
	}
	5% {
		transform: translate(0px, -2%);
	}
	10% {
		transform: translate(0px, 2%);
	}
	15% {
		transform: translate(0px, -2%);
	}
	20% {
		transform: translate(0px, 2%);
	}
	25% {
		transform: translate(0px, -2%);
	}
	30% {
		transform: translate(0px, 0px);
	}
}*/
.tell .tell_btn * {line-height: 1}
.tell .tell_btn h4 {
  text-shadow:2px 2px 5px rgba(0,0,0,0.5); 
  letter-spacing: 0.05em;
  font-family: var(--ff_NotoSans);
  color:  var(--color_white);
}
.tell .tell_btn h4 span {color: var(--color_yellow);}
.tell .tell_btn .contact_form {
  display: flex;
  align-items: center;
  text-shadow:2px 2px 5px rgba(0,0,0,0.5); 
}
.tell .inner,.tell .tell_btn {position: relative;}
.tell .inner img {position: absolute;}
.tell .inner img.picture_01,
.tell .inner img.picture_02 {
  z-index: 1;
}
.tell img.picture_01 {transform: rotate(-13deg);}
.tell img.picture_02 {transform: rotate(13deg);}


  
/*=============================================
コンテンツ
===============================================*/
h2 {
  position: relative;
  text-align: center;
  font-family: var(--ff_NotoSans);
}
h2 img.cha {
  position: absolute;
}

h2.line {
  display: block;
  border-top: solid;
  border-bottom: solid;
}
h2.line span {
  display: block;
  padding: 0.8em 0 0.6em;}
h2.line::before,h2.line::after {
  content: "";
  display: block;
}
h2.line::before {border-bottom: solid;}
h2.line::after {border-top: solid;}

h2.line.blue,h2.line.blue::before,h2.line.blue::after {
  color:  var(--color_blue);
  border-color:  var(--color_blue);
}
h2.line.orange,h2.line.orange::before,h2.line.orange::after {
  color:  var(--color_orange);
  border-color:  var(--color_orange);
}


/*　ポイント共通　PC-3カラム/SP-1カラム　
-------------------------------------*/
.point .point_con {
  position: relative;
  background: #FFF;
}
.point .point_con .circle_title {
  position: absolute;
  border-radius: 100%;
  background: var(--color_blue);
  color: var(--color_white);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
  line-height: 1;
  padding-top: 5px;
}
.point .point_con .circle_title .ct_1,
.point .point_con .circle_title .ct_2 {
  font-family: var(--ff_MP1p);
}

.point .point_con h3 {
  color: var(--color_blue);
  text-align: center;
}



/*んな鍵でもおまかせください
---------------------------------------------------------------*/
#service {
  background: var(--color_light_blue);
}
#service ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#service ul li {position: relative;}
#service ul li span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--color_blue);
  color: #FFF;
  font-weight: bold;
  text-align: center;
  padding: 0.3em 0 0.4em;
  border-radius: 0 0 10px 10px;
}

/*皆様が安心して暮らし続けられる地域の鍵屋さんを目指します。
---------------------------------------------------------------*/

#anshin {
  background: url("../images/bg01.jpg") repeat-x center top;
}
.svgText1 > svg,
.svgText2 > svg {
  width: 100%;
}
.svgText1 > svg > text ,
.svgText2 > svg > text {
  font-weight       : bold;
  text-anchor       : middle;
  dominant-baseline : alphabetic;
}
.svgText1 > svg > text {
  stroke            : #ec661a;
  fill              : #ffffff;
}
.svgText2 > svg > text {
  stroke            : #ffffff;
  fill              : #ec661a;
}
.svgText1 > svg > text:nth-of-type(1) ,
.svgText2 > svg > text:nth-of-type(1) {
  paint-order       : stroke;
  stroke-linejoin   : round ;
}
.svgText1 > svg > text:nth-of-type(2),
.svgText2 > svg > text:nth-of-type(2) {
  stroke-width      : 0;
}


#anshin .point .point_con ul {
  margin: 10px 0;
  border-top: solid 1px #ccc;
}
#anshin .point .point_con li {
  display: flex;
  align-items: flex-start;
  font-weight: bold;
  padding: 10px 0;
  border-bottom: solid 1px #ccc;
}
#anshin .point .point_con li::before {
  content: "\f058";
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /*←ココ！！！！！！！*/
  color: var(--color_orange);
  font-size: 1.5em;
  margin: -0.25em 5px 0 0;
}

#anshin .point .point_con .sub_title {
  display: block;
  background: var(--color_orange);
  color: var(--color_white);
  font-weight: bold;
  text-align: center;
  border-radius: 4em;
  line-height: 2.5em;
  margin: 0.5rem 0;
}
#anshin .point .point_con .sub_title2 {
  display: block;
  font-weight: bold;
  margin-bottom: 1rem;
}


/*大切にしている3つのポイント
---------------------------------------------------------------*/
#taisetu {  background: var(--color_light_blue);}
#taisetu .point .point_con p {margin: 1em 0;}
#taisetu .point .point_con figure {
  background: #fff;
  border: solid 1px #ccc;
}


/*作業料金
---------------------------------------------------------------*/
#price {padding-top: 0}
#price h2 {
  background: url("../images/price/price_title_bg.jpg") no-repeat center center var(--color_orange);
  background-size:  100% auto;
}
#price h2 .inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#price h2 .inner img.staff {
  position: absolute;
  left: 0;
}
#price h2 .title_1 {
  position: relative;
  background: var(--color_yellow);
  padding: 0 2em;
}
#price h2 .title_2 {color: var(--color_white);}

/******送料無料******/
#price .intro {
  position: relative;
  font-weight: bold;
  background: #FFF;
  z-index: 5;
}
#price .intro .FreeShipping {
  position: relative;
  display: block;
  margin: 1em auto;
  background: var(--color_light_blue);
  color: var(--color_blue);
  border-radius: 20px;
  text-align: center;
}
#price .intro .FreeShipping img {
  position: absolute;
  left: 0;
  bottom: 0;
}

/******料金******/
#price .price .col4 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 10px auto 1em;
}
#price .price .service {
  background: var(--color_orange);
  color: var(--color_white);
  text-align: center;
  font-weight: bold;
}
#price .price .service dt { position: relative;}
#price .price .service dd span.use {
  display: block;
  background: var(--color_white);
  color: var(--color_orange);
}
#price .price .col2 .service { padding: 20px 20px 10px;}
#price .price .col2 .service dt {margin-top: 5px;}
#price .price .col2 .service dt::before,
#price .price .col2 .service dt::after {
  position: absolute;
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: #FFF;
}
#price .price .col2 .service dt::before{top:calc(50% - 6px);}
#price .price .col2 .service dt::after{bottom:calc(50% - 6px);}
#price .price .col2 .service dt span {
  position: relative;
  display: inline-block;
  background: var(--color_orange);
  color: var(--color_white);
  line-height: 1;
  padding: 10px;
  z-index: 2;
}
#price .price .col2 .service dd span {font-family: var(--ff_MP1p);}

/*****注意*****/
#price .price .warning {
  border: solid 5px var(--color_red);
  background: var(--color_yellow);
  font-weight: bold;
}
#price .price .warning h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#price .price .warning h3 .box {
  background: var(--color_red);
  color: var(--color_white);
}
#price .price .warning h3 .under {
  color: var(--color_red);
  border-bottom: solid 2px var(--color_red);
}

/*****明朗会計*****/
#price .kaikei .inner {
  position: relative;
}
#price .kaikei img.cha {
  position: absolute;
}
#price .kaikei ul.benefit li::before {
  content: "\f058";
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /*←ココ！！！！！！！*/
  color: var(--color_orange);
  margin-right: 5px;
}

#price .kaikei .payment {
  background: var(--color_light_blue);
  font-weight: bold;
  padding: 20px;
}
#price .kaikei .payment h3 {
  background: var(--color_blue);
  color: var(--color_white);
  border-radius: 100px;
  text-align: center;
  line-height: 1.3;
  display: table;
  margin:0 auto 20px;
}
#price .kaikei .payment h3 span {color: var(--color_yellow);}
#price .kaikei .payment ul.payment_list > li {
  position: relative;
  display: flex;
  flex-direction: column;
}
#price .kaikei .payment ul.payment_list > li:not(:first-child)::after {
  content: "※";
  color: var(--color_blue);
  position: absolute;
  top: 5px;
  right: 5px;
}
#price .kaikei .payment ul.payment_list li span.title {
  color: var(--color_blue);
  line-height: 1.2;
  height: 3em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#price .kaikei .payment ul.payment_list li span.title span {
  font-weight: normal;
}
#price .kaikei .payment ul.payment_list li .pay_img {
  flex-grow: 1;
  line-height: 1;
  padding: 0 10px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#price .kaikei .payment ul.payment_list li .card {
  display: flex;
  justify-content: center;
}
#price .kaikei .payment ul.payment_list li .atobarai ul {
  display: flex;
}
#price .kaikei .payment ul.payment_list li .atobarai li {
  background: var(--color_blue);
  color: var(--color_white);
}
#price .kaikei .note {
  font-weight: normal;
  display: table;
  margin: 10px auto 0;
}



/*鍵の修理・交換サービスの流れ
---------------------------------------------------------------*/
#flow h2 img.cha {
  left: initial;
  top: 0;
  height: 0;
  right: 0;
  width: auto;
  height: 100%;
}
#flow .flow {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#flow .flow .step {position: relative;}
#flow .flow .step .circle_title {
  background: var(--color_blue);
  color: var(--color_white);
  font-family: var(--ff_MP1p);
  line-height: 1.1;
  position: absolute;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#flow .flow .step img {border: solid 1px #CCC}
#flow .flow .step h3 {
  color: var(--color_blue);
  text-align: center;
}

/*鍵の問題は突然に…
---------------------------------------------------------------*/
#trouble{padding: 0;overflow: hidden;}
#trouble .trouble_bg {
  position: absolute;
  width: 100%;
  z-index: -2;
}

/***トラブル***/
#trouble .trouble h2 {color: var(--color_white);}
#trouble .trouble ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#trouble .trouble ul li {
  background: #dcf3f1;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-weight: bold;
  line-height: 1.3;
}
#trouble .trouble ul li figure {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}
#trouble .trouble::before,
#trouble .trouble::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
}
#trouble .trouble::before {
  background: var(--color_orange);
  width: 100%;
  z-index: -5;
}
#trouble .trouble::after {
  background: var(--color_white);
  border-radius: 50%;
  z-index: -3;
}


/***おまかせください***/
#trouble .choose-me {
  position: relative;
  background: var(--color_orange);
  font-weight: bold;
}
#trouble .choose-me * {z-index: 10}
#trouble .choose-me img.logo,
#trouble .choose-me img.staff,
#trouble .choose-me img.cha,
#trouble .choose-me img.car {
  position: absolute;
  z-index: 12;
}

#trouble .choose-me h3,
#trouble .choose-me .sub {
  text-align: center;
  color: var(--color_white);
  text-align: center;
}
#trouble .choose-me .line_title {
  position: relative;
  margin-top: 20px;
}
#trouble .choose-me .line_title span.inner {
  position: relative;
  height: 100%;
}
#trouble .choose-me .line_title .bg1,
#trouble .choose-me .line_title .bg3 {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: 5;
}
#trouble .choose-me .line_title .bg2,
#trouble .choose-me .line_title .bg4 {
  position: absolute;
  width: 100%;
  top: 10px;
  bottom: -10px;
  z-index: 4;
}
#trouble .choose-me .inner:last-child {z-index: 30;}
#trouble .choose-me ul.benefit {
  display: flex;
  justify-content: space-between;
}
#trouble .choose-me ul.benefit li {
  position: relative;
  border: solid 4px var(--color_blue);
  background: var(--color_white);
  color: var(--color_blue);
  border-radius: 20px;
  text-align: center;
  font-family: var(--ff_MPr1C);
}

#trouble .choose-me ul.benefit li .circle_title {
  position: absolute;
  background: var(--color_blue);
  color: var(--color_white);
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--ff_MP1p);
}

#trouble .choose-me .inner:last-child p {color: var(--color_white);}


#trouble .choose-me::before,
#trouble .choose-me::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
}
#trouble .choose-me::before {
  background: var(--color_light_blue);
  width: 100%;
  z-index: 2;
}
#trouble .choose-me::after {
  background:var(--color_orange);
  border-radius: 50%;
  z-index: 3;
}




/*お客様の声
---------------------------------------------------------------*/
#voice {background: var(--color_light_blue);}
#voice .voice .voice_con {
  border: solid 4px var(--color_blue);
  background: var(--color_white);
  border-radius: 20px;
  padding: 10px 15px 15px;
  display: flex;
  flex-direction: column;
}
#voice .voice .voice_con h3 {
  color: var(--color_blue);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  height: 2.8em;
}
#voice .voice .voice_con .sub {font-weight: bold}




/*よくある質問
---------------------------------------------------------------*/
#faq .faq_title {
  position: relative;
  display: block;
  border-color:  var(--color_orange);
  color:  var(--color_orange);
  padding: 1.5em 0 0.6em;
  margin-bottom: 20px;
}
#faq .faq_title h2 {
  color:var(--color_text);
}
#faq .faq_title .sub {
  position: absolute;
  top: -1em;
  text-align: center;
  background: var(--color_orange);
  color: var(--color_white);
  font-weight: bold;
  line-height: 2em;
}
#faq .faq_title_sub {
  position: relative;
  font-weight: bold;
  text-align: center;
}
#faq .faq_title_sub img.cha {
  position: absolute;
}

#faq .faq {
  margin-top: 2em;
  border: solid 1px var(--color_blue);
  border-radius: 1rem;
  overflow: hidden;
}

#faq .faq .faq_q {
  position: relative;
  background: var(--color_blue);
  color: #FFF;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
#faq .faq .faq_q::after {
  position: absolute;
  right: 0.5em;
  content: "＋";
  color: #FFF;
}
#faq .faq .faq_q.open::after {
  content: "－";
}
#faq .faq .faq_a {
  display: none;
  padding: 1em 1.5em;
}




/*鍵猿の鍵交換はなぜ安心?
---------------------------------------------------------------*/
#why {
  background: url("../images/bg01.jpg") repeat-x center top;
  font-weight: bold;
}
#why .benefit {
  border: solid 4px var(--color_blue);
  background: var(--color_white);
}
#why .benefit h3 {text-align: center}
#why .benefit h3 .title_1 {color: var(--color_blue);}
#why .benefit h3 .title_2 > span {
  display: block;
  line-height: 1.3;
  margin: 0.3em 0;
}



/*最短15分で駆付け対応
---------------------------------------------------------------*/
#minutes15 {
  background: url("../images/pc/15minutes_bg.jpg") no-repeat center center var(--color_light_blue);
  padding: 0;
}
#minutes15 p {
  text-align: center;
  line-height: 0;
  margin: 0;padding: 0;
}




/*YouTube　レスポンシブ対応
-----------------------------*/
#youtube {
  margin: auto;
}
.youtube-16-9 {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  padding-top: 56.24%;
  border: solid 1px #000000;
overflow: hidden;
}
.youtube-16-9 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}