/**
* Template Name: Shield
* Template URL: https://templatemag.com/shield-bootstrap-agency-template/
* Author: TemplateMag.com
* License: https://templatemag.com/license/
*/

/* ==========================================================================
   Base Styles and Bootstrap Modifications
   ========================================================================== */

html, button, input, select, textarea {
  color: #000;
}

body {
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #f2c2c9;
  color: #a4003a;
  text-shadow: none;
}

::selection {
  background: #16a085;
  color: #a4003a;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
  vertical-align: middle;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   General styles
   ========================================================================== */

html, body {
  height: 100%;
}

body {
  font-family: "Lato";
  font-weight: 400;
  font-size: 16px;
  color: #222;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
}

.col-md-4 {
  padding-bottom: 20px;
}

.row {
  margin-right: -10px;
  margin-left: -10px;
}

.modal-header {
  background: #3498db;
}

.modal-header h4 {
  color: white;
}

.modal-footer {
  background: #2b2b2b;
}

.navbar-default {
  border-color: transparent;
  background-color: #dadada;
}

.navbar-toggle {
  border-color: transparent;
  border: 0px solid transparent;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
  background-color: #16a085;
  color: white;
}
.navbar-nav li{
	font-size:15px;
	padding-right:10px;
}



hr.style1 {
  position: relative;
  border: none;
}

hr.style1:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 2px;
  background: #ccc;
}

a img {
  /*background: white;*/
}

.odd a img {
  background: #f5f5f5;
}

/* Titles */

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway";
  font-weight: 300;
  color: #333;
}
/* Paragraph & Typographic */

h2{font-size:40px;line-height:1.5;}

p {line-height: 28px;
    margin: 0;
    padding: 0;
  	/*margin-bottom: 25px;*/
}

.centered {
  text-align: center;
}

.paragraph-lead {
  font-size: 20px;
  color: #3498db;
}

strong {
  font-weight: 700;
}

em {
  font-weight: 300;
}

pre {
  background: #ebebeb;
  border: none;
  font-family: "Monaco";
  font-size: 16px;
  color: #666;
  padding: 20px;
  line-height: 28px;
}

small {
  font-size: 12px;
}

blockquote, blockquote p {
  line-height: 28px;
  color: #999;
  font-weight: 300;
  font-style: italic;
}

blockquote {
  position: relative;
  margin: 0 0 40px -30px;
  padding-left: 30px;
  border-left: 5px solid #3498db;
}

blockquote cite {
  position: absolute;
  bottom: -25px;
  right: 0;
  font-size: 12px;
  font-style: italic;
  color: #333;
  font-weight: 300;
}

blockquote cite:before {
  content: "-- "
}

/* Images */

.overflow-image {
  margin-top: -65px;
}

/* Links */

a {
  color: #3498db;
  word-wrap: break-word;
  -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
  -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
  -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
  -o-transition: color 0.1s ease-in, background 0.1s ease-in;
  transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover, a:focus {
  color: #c0392b;
  text-decoration: none;
  outline: 0;
}

a:before, a:after {
  -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
  -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
  -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
  -o-transition: color 0.1s ease-in, background 0.1s ease-in;
  transition: color 0.1s ease-in, background 0.1s ease-in;
}

span.link-t-a {
position: relative;
top: -100px;/*   ?  l  ?   ?A ? ?      ? */
display: block;
}

span.link-t-a2 {
position: relative;
top: -20px;/*   ?  l  ?   ?A ? ?      ? */
display: block;
}

/* ==========================================================================
   Wrap Sections
   ========================================================================== */

#headerwrap {
  background: url(../img/header_bg1.jpg) no-repeat center top;
  margin-top: -50px;
  padding-top: 120px;
  text-align: center;
  background-attachment: relative;
  background-position: center center;
  min-height: 650px;
  width: 100%;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/* 問題が起きているPC向けだけ上書き調整 */
@media screen and (min-width: 1024px) {
  #headerwrap {
    min-height: 900px;    /* 高さを大きく */
    overflow: visible;    /* 画像が隠れないように */
    margin-top: 0;        /* 上のずれを直す */
  }
}




#headerwrap h1 {
  color: #ffffff;
  margin-top: 30px;
  padding-bottom: 20px;
  letter-spacing: 8px;
  font-size: 100px;
  font-weight: bold;
  text-shadow: 2px 2px 2px #000;
}

#headerwrap p {
  color: #ffffff;
  font-size: 40px;
  font-weight: 400;
  text-align: center;
  line-height: 40px;
  letter-spacing: 3px;
  margin-left: 15px;
  text-shadow: 1px 1px 1px #000;
}

#greywrap {
  background: #f5f5f5;
  padding-top: 20px;
  border-bottom: 1px solid #ddd;
  text-align: center;
 	width:98%;
	margin:0 auto;
}

#greywrap .callout {
  margin-bottom: 50px;
}
#greywrap h2 {
	font-size:28px;line-height:1.5;
}

#greywrap p {
  padding-left: 5px;
  padding-right: 5px;
  letter-spacing: 1px;
text-align:left;
  /*padding-top: 15px;
  padding-bottom: 15px;*/
}

#greywrap .icon {
  font-size: 60px;
  line-height: 30px;
  padding-top:1em;
  margin-bottom: 10px;
}

#footerwrap {
  background: #2b2b2b;
  margin-top: 0px;
  padding-top: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}

#footerwrap h4 {
  color: white;
}

section{
	clear:both;
	padding-top: 60px;
}


/* ==========================================================================
   Box Sections
   ========================================================================== */

.white h1 {
  padding-top: 35px;
}

.white p {
  padding-top: 10px;
}

.textshadow{
  text-shadow: 2px 2px 2px #000;
}

/* Section Dividers */

.section-divider {
  z-index: 999;
  width: 100%;
  display: table;
  max-height: 450px;
  border-bottom: 2px solid #E6EAED;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 30px;
  padding-bottom: 70px;
  margin-top: 45px;
  background-position: center center;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: relative;
  text-align: center;
}

.textdivider h2 {
  padding-top: 70px;
  color: white;
  font-size: 40px;
}

.textdivider p {
  color: white;
  font-size: 25px;
}

/* Section Dividers Backgrounds */

.divider1 {background-image: url('../img/bg/divider1.jpg')}

.divider2 {background-image: url('../img/bg/divider2.jpg')}

.divider3 {background-image: url('../img/bg/divider3.jpg');margin-top: 0px;}

.divider4 {background-image: url('../img/bg/divider4.jpg')}

.divider5 {background-image: url('../img/bg/divider5.jpg')}

.divider6 {background-image: url('../img/bg/divider6.jpg')}

/* ==========================================================================
   Services Section
   ========================================================================== */

.service-trigger {
  display: block;
  position: relative;
  margin-bottom: 15px;
  color: white;
  font-size: 20px;
  text-align: center;
  height: 168px;
  cursor: pointer;
  padding: 90px 20px 50px 20px;
  border: none;
  background: #333;
}

.service-trigger:before {
  width: 100%;
  top: 50px;
  color: #3498db;
  font-size: 36px;
  text-align: center;
  position: absolute;
  left: 0;
}

.service-active .service-trigger {
  background: #222;
}

.service-active p {
  font-family: 'Lato', sans-serif;
  padding-top: 10px;
}

.service-content {
  padding: 15px 20px;
  background: #e6eaed;
  display: block;
  height: auto
}

.service-content p:last-child {
  margin: 0;
}

/* ==========================================================================
   Image Mask
   ========================================================================== */

.grid figure {
  margin: 0;
  position: relative;
}

.grid figure img {
  width: 100%;
  display: block;
  position: relative;
}

.grid figcaption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  color: #fff;
  background: #3498db;
}

.grid figcaption h5 {
  margin: 0;
  padding-top: 0px;
  padding-left: 20px;
  padding-bottom: 5px;
  color: #fff;
  font-weight: 700;
  text-align: left;
  letter-spacing: 2px;
}

.grid figcaption a {
  text-align: left;
  padding: 5px 10px;
  margin-left: 20px;
  display: inline-block;
  background: #2f2f2f;
  color: #fff;
  font-size: 13px;
}

/* Caption Style */

.mask figure {
  overflow: hidden;
}

.mask figure img {
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
}

.mask figure:hover img, .mask figure.cs-hover img {
  -webkit-transform: translateY(-30px);
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  transform: translateY(-30px);
}

.mask figcaption {
  height: 50px;
  width: 100%;
  top: auto;
  bottom: 0;
  opacity: 0;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
  -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
  transition: transform 0.4s, opacity 0.1s 0.3s;
}

.mask figure:hover figcaption, .mask figure.cs-hover figcaption {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
  -moz-transition: -moz-transform 0.4s, opacity 0.1s;
  transition: transform 0.4s, opacity 0.1s;
}

.mask figcaption a {
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 30px;
}

/* ==========================================================================
   Blog Section
   ========================================================================== */

.blog-bg {
  background: #2b2b2b;
  padding-right: 0px;
  padding-left: 0px;
}

.blog-bg h4 {
  color: #dadada;
  padding-top: 0px;
}

.blog-bg h5 {
  color: #dadada;
  font-size: 11px;
}

.blog-content {
  padding-top: 10px;
  background: #f2f2f2;
}


#map{
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
	z-index: 0;
}

#map iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

.inner{
	width: 94%;
	margin: 0 auto;
}

.innerS{
	width: 70%;
	margin: 0 auto;
	padding-bottom: 30px;
}

.innerS2{
	width: 80%;
	margin: 0 auto;
	padding-bottom: 30px;
}





/*Youtube レシポンシブ
------------------------------------*/
.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /* A X y N g   16:9 ?? ?c  */
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

/*画像サイズ
------------------------------------*/
div.resizeimage {
  max-width: 100%;
  margin: 0 auto;
}

div.resizeimage img {
  padding-top: 50px;
  width: 100%;
  height: auto;
  display: block;
}
/* スマホ表示の親要素に対して横スクロール防止など */
.sp {
  width: 100%;
  overflow-x: hidden;
  text-align: center;
}
hr.style11 {
	border-top: 1px dashed #8c8b8b;
	margin-bottom:20px;
}


/*・のリスト
-----------------------------------------*/
ul.maru{
  list-style: square;
	padding-left:2em;
}
ul.maru li{padding-top:20px;}

/*    ?  X g
-----------------------------------------*/
ul.asterisk li {
  list-style-type: none;
  text-indent: -1em;
}
ul.asterisk li:before {
  display: inline;
  content: "\203B";
}

ul.asterisk li{padding-top:20px;}

/*□印のリスト
-----------------------------------------*/
ul.square li {
  list-style-type: none;
  text-indent: -1em;
}
ul.square li:before {
  display: inline;
  content: "\25a1";
}

/*丸数字リスト
-----------------------------------------*/
ol.maru_num  {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ol.maru_num li  {
  padding-top:15px;
}

/*数字リスト
-----------------------------------------*/
ol.num  {
}
ol.num li  {
  padding-top:10px;
}

.col-lg-6{
  padding-right: 10px;
  padding-left: 10px;
}


.indent1{
	text-indent:-1em;
	padding-left:1em;
}


/*----------------------------------------------------
   フォントサイズ（レシポンシブ用)
------------------------------------------------------ */
.ft26{font-size:26px;}
.ft24{font-size:24px;}
.ft22{font-size:22px;}
.ft20{font-size:20px;line-height:30px;}
.ft18{font-size:18px;}
.ft16{font-size:16px;}

/*----------------------------------------------------
  行間
------------------------------------------------------ */
.col-lg-3 h4{margin-bottom:-10px;}

/*----------------------------------------------------
 グーグルマップ　レスポンシブ
------------------------------------------------------ */
.gmap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

#copy{
	margin: 10px 0 0 0;
	padding: 10px 0;
	background-color: #f08ea0;
	text-align: center;
	font-size: 13px;
	color: #fff;
}

/*-------------------------------
topへ戻る 
--------------------------------*/
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #ef3f98;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/* ==========================================================================
   checkmark
   ========================================================================== */

.checkmark001{
	font-size:18px;	
	
	padding-left:26px;
	line-height: 1.4;     /* ← 行の高さ追加で段差を軽減 */
	position:relative;

}
.checkmark001:before,
.checkmark001:after{
	content:"";
	display:block;
	position:absolute;
}
.checkmark001:before{
	
	width:18px;
	height:18px;
	background:#ffffff;
    	border:1px solid #000000;
	left:0;top:3px;
}
.checkmark001:after{
	
	border-left:2px solid #ff0000;
	border-bottom:2px solid #ff0000;
	width:10px;
	height:5px;
	
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:4px;
	top:7px;

}
@media only screen and (max-width: 799px){
			.checkmark001{
			font-size:18px;	
			padding-left:26px;

			}
}


/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */
   .pc { display: block !important; }
   .sp { display: none !important; }

@media screen and (max-width:1050px), screen and (max-device-width:1050px) {
  body .header {
    background-attachment: scroll;
  }
}

/*ipad portrait*/

@media only screen and (min-device-width:768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .header {
    background-attachment: scroll;
  }
}

@media only screen and (min-device-width:768px) and (max-device-width: 900px) and (orientation: portrait) {
	.syosin-margin{
		margin-top:200px;
	}
}

@media screen and (max-width:769px) {

   .pc { display: none !important; }
   .sp { display: block !important; }

  #headerwrap h1 {
    font-size: 80px;
  }
  #headerwrap p {
    font-size: 30px;
    line-height: 38px;
  }

  #greywrap {
    padding-top: 30px;
	width:94%;
  }

  #greywrap h2 {
	font-size:24px;
  }

section{
	clear:both;
	padding-top: 30px;
}


 h1,h2 {
	font-size:24px;
    line-height:1.7;
	font-weight:bold;

   margin-top:5px;
   margin-bottom:5px;

 }

 hr {
  margin-top: 0px;
  margin-bottom: 0px;
 }
 .innerS{
	width: 96%;
	margin: 0 auto;
	padding-bottom: 20px;
 }
@media only screen and (max-width: 769px) {
.innerS {
width: 98%;
padding-left: 10px;
padding-right: 10px;
}
}

 .innerS2{
	width: 96%;
	margin: 0 auto;
 }

/*----------------------------------------------------
  フォントサイズ（レシポンシブ用）
------------------------------------------------------ */
.ft26{font-size:22px;}
.ft24{font-size:20px;}
.ft22{font-size:20px;}
.ft20{font-size:18px;line-height:1.7;}
.ft18{font-size:18px;}
.ft16{font-size:16px;}

}

@media screen and (max-width:640px){

  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 2px 15px 2px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 16px;
  }

/*スマホメニューの高さを変更する*/
	.navbar-fixed-top .navbar-collapse,
	.navbar-fixed-bottom .navbar-collapse {
	  max-height: 500px;
	}
/* スマホ表示時の調整  */
@media (max-width: 768px) {
  .navbar-fixed-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    max-height: 800px;  /* メニューの最大高さを変更するか、noneで解除 */
    overflow-y: auto;    /* メニューが長くなる場合、スクロールできるようにする */
  }
  
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 60px; /* ヘッダーの高さを考慮したスクロール位置 */
  }
}

hr:before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
}

.textdivider h1 {
  padding-top: 50px;
  color: white;
  font-size: 20px;
}

.textdivider p {
  color: white;
  font-size: 16px;
}

/*リスト*/
ul.maru{padding-left:1.5em;}



#siteBottom{
	margin-bottom: 85px;
}
.col-lg-6{
  padding-right: 0px;
  padding-left: 0px;
}

.col-lg-3{
  padding-right: 5px;
}

}

/*-------------------------------------------------------------
 継承のプロセス
-------------------------------------------------------------*/
.box-process{display:flex;gap:20px;flex-direction:row;
	padding:10px 10px 10px 20px;
    background: #f8f8ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box-process-p{width:60%;} /*    */
.process-title {
 	position: relative;
  	padding: 0.7rem 0 0 0;
	font-size:26px;
	font-weight:bold;
	margin-bottom:20px;
}/*タイトル*/


.box-process-img{width:40%;}/*画像の大きさ*/
.box-process-img img{width:100%;border-radius:10px;}
.down{width:150px;margin:2em;}

@media only screen and (max-width: 769px){
	.box-process{gap:20px;flex-direction:column;}
	.box-process-p{width:100%;}
	.box-process-img{width:100%;max-width:400px;margin:0 auto;}
	.process-title {font-size:24px;}
	.down{width:100px;margin:2em 0 1em 2em;}
}

/*-------------------------------------------------------------
 継承のメリット
-------------------------------------------------------------*/
.boxmerit{display:flex;gap:0 50px;align-items:flex-end;justify-content:center;margin-top:3em;}
.boxmerit-left{width:60%;text-align:right;}
.boxmerit-right{width:40%;text-align:left;}
.boxmerit-left img{width:800px;max-width:100%;}
.boxmerit-right img{width:300px;max-width:100%;}

@media screen and (max-width:769px) {
	.boxmerit{display:flex;align-items:center;margin-top:3em;flex-direction:column;}
	.boxmerit-left{width:100%;}
	.boxmerit-right{width:100%;text-align:center;}
	.boxmerit-right img{width:200px;max-width:100%;}
}

/*-------------------------------------------------------------
Q&A
-------------------------------------------------------------*/
.qa-list dl {
    position: relative;
    margin: 30px 0 0;
    cursor: pointer;
    border: 1px solid #DDD;
}
.qa-list dl:first-child {
  margin-top: 0;
}
.qa-list dl::after {
    position: absolute;
    top: 27px;
    right: 26px;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    transform: rotate(135deg);
    border-top: 2px solid #0000ff;
    border-right: 2px solid #0000ff;
}
.qa-list .open::after {
    transform: rotate(-45deg);
}
.qa-list dl dt {
    position: relative;
    margin: 0;
    padding: 15px 20px 15px 60px;
    font-weight: bold;
	font-size:20px;
    background: #f8f8ff;/*#e6e6fa;*/
}
.qa-list dl dt::before {
    font-size: 22px;
    line-height: 1;
    position: absolute;
    top: 15px;
    left: 20px;
    display: block;
    content: 'Q.';
    color: #3285bf;
}
.qa-list dl dd::before {
    font-size: 22px;
    line-height: 1;
    position: absolute;
    left: 20px;
    display: block;
    content: 'A.';
    font-weight: bold;
    color: #3285bf;
}
.qa-list dl dd {
    position: relative;
    margin: 0;
    padding: 20px 20px 20px 60px;
	font-size:20px;
	line-height:1.7;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}

@media screen and (max-width: 769px) {
 .qa-list dl {
    margin: 20px 0 0;
}
.qa-list dl:after {
    top: 15px;
    right: 20px;
    width: 7px;
    height: 7px;
}
.qa-list dl dt {
    padding: 15px 35px 15px 30px;
    font-size: 16px;
}
.qa-list dl dt::before {
    font-size: 16px;
    top: 18px;
    left: 10px;
}
.qa-list dl dd::before {
    font-size: 16px;
    left: 10px;
    margin-top: 5px;
}
.qa-list dl dd {
    margin: 0;
    padding: 16px 16px 16px 30px;
    font-size: 16px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}
}
/*-------------------------------------------------------------
 indentの指定
-------------------------------------------------------------*/
.indent {
  text-indent: -1em;     /* 1文字分だけ字下げの逆、つまり「ぶら下げインデント」 */
  padding-left: 1em;     /* 全体を右に1文字分寄せる */
  margin-bottom: 6px;    /* 行間のスペース（必要に応じて調整） */
  line-height: 1.6;      /* 行の高さで見やすく（任意） */
}

/*-------------------------------------------------------------
 共通コンテナ（ページ幅の制御など）
-------------------------------------------------------------*/
.container {
  max-width: 1200px;   /* 必要に応じて1000pxなどに調整 */
  margin: 0 auto;      /* 中央寄せ */
  padding: 0 20px;     /* 左右に余白 */
}

@media only screen and (max-width: 769px) {
  .container {
    padding: 0 10px;  /* ← スマホでは左右のpaddingを調整 */
  }
}
/*-------------------------------------------------------------
 症状sectionのみスマホ表示幅指定
-------------------------------------------------------------*/
@media only screen and (max-width: 769px) {
  .symptom-section {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/*-------------------------------------------------------------
  お問い合わせの流れ
-------------------------------------------------------------*/
.box-nagaretop{
    background: #f8f8ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
	padding:20px 10px 10px 20px;

}
.box-nagare{
	display:flex;
	gap:10px;flex-direction:row;

}
.box-nagare-p{
	width:68%;

	padding-right: 10px;
}
 .nagaretitle {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 20px;
}

.box-nagare-img{width:32%;}

.box-nagare-img img{width:100%;
}

@media only screen and (max-width: 769px){
	.box-nagare{
	gap:18px;

	width:100%;
	flex-direction:column;
	padding:8px 2px 8px 2px;}

	.box-nagare-p{width:100%;}

	.box-nagare-img{
	width:100%;text-align:center;}

 .nagaretitle {
  font-size: 20px;
	line-height:1.7;
  font-weight: bold;
  margin-bottom: 20px;
}

.box-nagare-img img {
  width: 100%;
  max-width: 250px; /* 例：250pxまで */
  height: auto;
}

	.down{width:100px;margin:2em 0 1em 2em;}
}


/* 特定の画像だけサイズを小さくする */
.special-img {
  width: fit-content;
  max-width: 210px;
}

.special-img img {
  width: 100%;
  max-width: 210px;
 height: auto; /* ←これが重要！ */
object-fit: contain;  /* 万一余計なサイズが入っても自然に調整 */
  display: block;
}
@media (max-width: 768px) {
  .special-img {
    margin: 0 auto;
    display: block;
  }
}

@media (max-width: 600px) {
  .topclinic-sp {
    display: inline-block; /* 中央寄せを有効にする場合 */
    width: 100%;           /* コンテナいっぱいに */
    max-width: 150px;      /* 最大150pxに制限 */
    height: auto;          /* アスペクト比を維持 */
  }
}



/*-------------------------------------------------------------
 まずは安心するためにの箇所センターへ
-------------------------------------------------------------*/
@media screen and (min-width: 770px) {
  .center-pc {
    text-align: center !important;
  }
}


/*-------------------------------------------------------------
 アクセス
-------------------------------------------------------------*/
.box-access {
display: flex;
gap: 80px;
flex-direction: row;
padding: 20px 10px 10px 20px;
margin: 0 auto;
}

.box-access-p {
width: 40%;
}

.box-access-img {
width: 60%;
display: flex;
justify-content: flex-end;
}

/*.box-access-img iframe {
width: 60%;
height: auto;
display: flex;
justify-content: flex-end;
}
*/
.gmap {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
width: 100%;
}

.gmap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
@media only screen and (max-width: 769px) {
.box-access {
gap: 20px;
flex-direction: column;
padding: 10px 5px 10px 10px;
}
.box-access-p {
width: 100%;
}
.box-access-img {
width: 100%;
text-align: center;
justify-content: center; /*  X } z ??    ??  */
}
}

@media only screen and (max-width: 640px) {
#map iframe {
width: 96% !important;
left: 2%;
}
}


/*  地図の見え方調整　#MAP */


#map iframe {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
border: 0;
}



/*-------------------------------------------------------------
 チャンス
-------------------------------------------------------------*/
.chance-title{font-size:50px;font-weight:bold;text-align:center;margin-bottom:70px;}
.chance-naiyo {
  font-size: 27px;
  line-height: 1.7;
  font-weight: bold;
	text-align: center; /* タイトルを中央揃え */
}


.boxchance{display:flex;gap:0 20px;align-items:center;border-bottom:solid 2px #dcdcdc;}
.boxicon{padding:1.5em 0;
		background-color:#dcdcdc;
		text-align:center;}

.boxicon img{width:100px;}/* A C R   ??  */

.boxicon-width01{width:250px;max-width:25%;} /*  i ??A C R   g ? */
.boxicon-width02{width:400px;max-width:35%;} /*  i ??A C R   g ? */
.boxicon-width03{width:700px;max-width:45%;} /* O i ??A C R   g ? */

.boxp p.p1{font-size:36px;font-weight:bold;}
.boxp p.p2{font-size:26px;margin-top:1em;}

@media only screen and (max-width: 769px){

	.chance-title{font-size:22px;margin-bottom:40px;line-height:1.5;}
	.chance-naiyo{font-size:18px;line-height:1.7;
  text-align: center; /* タイトルを中央揃え */
  }

	.boxchance{display:flex;gap:0 10px;align-items:center;border-bottom:solid 2px #dcdcdc;}
	.boxicon{padding:0.5em 0;
			background-color:#dcdcdc;
			text-align:center;}
	.boxicon img{width:80px;} @/* A C R   ??  */
	.boxicon-width01{width:150px;max-width:25%;}
	.boxicon-width02{width:200px;max-width:30%;}
	.boxicon-width03{width:250px;max-width:40%;}

	.boxp p.p1{font-size:20px;font-weight:bold;}
	.boxp p.p2{font-size:16px;margin-top:0.5em;}

}

/*-------------------------------------------------------------
 専用フォームボタン
-------------------------------------------------------------*/
#btn_animation .btn {
  display: block;
  position: relative;
  width: 400px;
  max-width:100%;
  padding:5px 0;
  line-height: 70px;
  font-size: 24px;
  font-weight:bold;
  text-decoration: none;
  background-image: radial-gradient(circle, rgba(42, 179, 252, 1), rgba(58, 99, 255, 1));
  color: #fbfbfb;
  text-shadow:#696969 1px 1px;
  text-align: center;
  overflow: hidden;
}

#btn_animation .btn-big {
  width: 500px;
  padding:20px 0;
  font-size: 30px;
}

#btn_animation .btn:hover {
    text-decoration: none;
    color: #fbfbfb;
}

#btn_animation .btn::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fbfbfb;
    animation: btn_animation 2.5s ease-in-out infinite;
}

@-webkit-keyframes btn_animation {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

@media only screen and (max-width: 799px){
	#btn_animation .btn {
	  width: 300px;
	 @max-width:96%;
  	  line-height: 50px;
	  font-size: 18px;
	  font-weight:bold;
	  margin:0 auto;
	}
	#btn_animation .btn-big {
	  width: 400px;
	  max-width:96%;
	  padding:20px 0;
	  font-size: 20px;
	}
}


/* Contact Form */

#contact {
  padding: 40px 0;
}

.contact-form {}

.contact-form label {
  color: #999;
}

.contact-form input, .contact-form textarea {
  padding: 10px 12px;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  height: auto;
}

.contact-form .form-send {
  text-align: center;
}

.contact-form .form-send button {
  background: #3498db;
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: 0.4s;
  cursor: pointer;
}

.contact-form .form-send button:hover {
  background: #3eacf5;
}

.contact-form .validate {
  display: none;
  color: red;
  margin: 0 0 15px 0;
  font-weight: 400;
  font-size: 13px;
}

.contact-form .loading {
  display: none;
  color: #555;
  background: #fff;
  text-align: center;
  padding: 15px;
  margin: 15px 0;
}

.contact-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

@-webkit-keyframes animate-loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.contact-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin: 15px 0;
}

.contact-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin: 15px 0;
}

/* Copyrights */

#copyrights {
  background: #222222;
  padding: 20px 0;
  text-align: center;
}

#copyrights p {
  margin-bottom: 5px;
  color: #fff;
}

#copyrights a {
  color: #3498db;
}

.credits {
  color: #999;
}


/* 改行について　*/

.pc-only {
  display: none; /* デフォルトは非表示（スマホなど） */
}

@media only screen and (min-width: 769px) {
  .pc-only {
    display: inline; /* PC画面のみ表示 */
  }
}