@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body{
	font: 16px/1.9 "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
	font-weight: normal;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #1d2088;
	background: #fff;
}

a{
	color: #0066ff;
	text-decoration: none;
}

a:hover, .active{
	text-decoration: none;
	font-weight: 600;
}

a:active, a:focus,input:active, input:focus{outline:0;}


/*/////////////////////////////////////////////////////////////////////////////

 ヘッダー

/////////////////////////////////////////////////////////////////////////////*/
#header{
	text-align: center;
}

#header h1{
	padding-top: 20px;
	font-size: 2.3em;
	font-weight: 600;
	background: #ba83b7;
	color: #fff;
	letter-spacing: 10px;
}

#mainnav a{
	color: #1d2088;
}

#mainImg h2{
	font-size: 1.5em;
	color: #fff;
	margin-bottom: 30px;

}

#mainImg {
	position: relative;
	overflow: hidden;
	width: 100%;
	text-align: center;
	font-size: 30px;
	font-weight: normal;
	background: url("../images/index/header_bgpc.jpg") no-repeat center top;
	background-size: cover;
	padding: 20px 0 40px; /* テキストの上下余白 */
	line-height: 1.5;
}

#mainImg img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.main-text {
	margin-top: 20px;
	margin-bottom: 10px;
	color: #fff;
}

.img-caption {
	position: absolute;
	bottom: 20px;
	right: 50px;
	color: #1d2088;
	text-align: left;
	white-space: pre-line;
	max-width: 55%; /* 文字表示範囲調整 */
}

.img-caption .highlight {
    font-size: 35px;
    color: #fff;
}


/*swiper　調整*/
.swiper-container{
	margin-top: 40px;
}




/*/////////////////////////////////////////////////////////////////////////////

 フッター

/////////////////////////////////////////////////////////////////////////////*/
#footer{
	clear: both;
	padding: 50px 10px 50px 0;
	text-align: center;
	font-size: 12px;
	background: #fffeee;
}

/*下部固定メニュー
-----------------------------------------------------------------------------*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
}

#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
	justify-content: center;
	align-items: center;
	width: 50%;
	margin: 0;
	font-size: 25px;
	border-right: 1px solid #fff;
	background: #ba83b7;
	line-height: 1em;
}

/*右メニュー*/
#sp-fixed-menu li:last-child{
   border-right: none;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:10px 0;
}

#sp-fixed-menu .fontS{
	font-size: 14px;
}

@media only screen and (max-width: 640px) {
#sp-fixed-menu li{
	line-height: 0.8;
	/*align-items: center; 縦中央揃えしたい時必要
	display: flex;縦中央揃えしたい時必要*/
}
}


/*/////////////////////////////////////////////////////////////////////////////

 ページ共通

/////////////////////////////////////////////////////////////////////////////*/

img{
	max-width: 100%;
	height: auto;
}

section{
	clear:both;
}

section h2{
	margin: 0 auto 40px;
	font-size: 35px;
	font-weight:normal;
	text-align: center;
	background: #ba83b7;
	color: #fff;
}

section h2.no-margin {
	margin-bottom: 0;
}

section h3{
	margin: 0 auto 20px;
	font-size: 35px;
	font-weight:normal;
	text-align: center;
	line-height: 1.5;
}

.underline {
	height: 2px;
	background-color: #1d2088;
	width: 100%;
	margin-top: -10px;
	margin-bottom: 20px;
}

.inner{
	width: 75%;
	margin: 0 auto;
	padding-bottom: 30px;
}

.article_middle{
	margin: 40px auto 0;
}


/*　文字
-----------------------------------------------------------------------------*/
/*　文字段落　*/
.indentS{
	margin-bottom: 10px;	
}
.indentM{
	margin-bottom: 20px;
}
.indentL{
	margin-bottom: 30px;
}
.outdentL{
	margin-top: 30px;
}


/*　表示画像
------------------------------------------------------------------------------*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 640px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}


/*　改行
------------------------------------------------------------------------------*/
/*スマホで改行*/
.br-sp {
  display: none;
}
@media screen and (max-width: 640px) {
.br-pc {
	display: none;
}
.br-sp {
	display: inline-block;
}
}

/*タブレット以下で改行*/
.br-tb {
  display: none;
}
@media screen and (max-width: 1024px) {
.br-pc {
	display: none;
}
.br-tb {
	display: inline-block;
}
}

/*パソコンの時だけ改行*/
.pc-only-br {
    display: none;
}
@media screen and (min-width: 767px) {
.pc-only-br {
	display: inline;
}
}


/*　文字位置
------------------------------------------------------------------------------*/
/*パソコンはセンター寄せ、スマホでは左寄せ*/
.responsive-text {
	text-align: center;
}
@media screen and (max-width: 767px) {
.responsive-text {
	text-align: left;
}
}


/*　リンク
------------------------------------------------------------------------------*/
/* 角丸ボックス*/
.link_box {
	display: inline-block;
	background: #ba83b7;
	border-radius: 20px;
	color: #fff;
	padding: 0.5em 2em;
	font-size: 25px;
	text-decoration: none;
	text-align: center;
	transition: background 0.3s;
}
.link_box:hover {
	background: #1d2088;
}


/*　その他
------------------------------------------------------------------------------*/
/*追従するトップへボタン　*/
#page_top {
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 90px;
  right: 10px;
  background-color: #1d2088;
  z-index: 1000;
  border-radius: 50%;
  opacity: 0; /* ← 最初は透明 */
  visibility: hidden; /* ← 最初は見えない */
  transform: translateY(50px); /* ← 下にずらしておく */
  transition: all 0.3s ease;
}

#page_top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* ← 元の位置にスライド */
}

#page_top a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

#page_top a::before {
  font-family: FontAwesome;
  content: '\f106';
  font-size: 24px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#page_top a:hover {
	border-radius: 50%;
	opacity: 0.5;
}



/*/////////////////////////////////////////////////////////////////////////////

 【トップページ】（index.html）

/////////////////////////////////////////////////////////////////////////////*/

/*　墓石について
------------------------------------------------------------------------------*/
#top_boseki{
	text-align: center;
	background-image: url("../images/index/sec_bg.jpg");
	padding-bottom: 40px;
	margin-top: 30px;
	background-repeat: no-repeat;
	background-size: cover; /* スマホでも画面にフィット */
	background-position: center center;
}

.inner_col{
	width: 70%;
	margin: 0 auto;
	padding: 20px 0;
}

.boseki_box{
	display: block;
	background: #cfbad9;
	padding: 1%;
	margin-top: 10px;
}

.col2 {
	display: flex;
	flex-wrap: wrap;
	gap: 10px; /* ← 画像間の余白 */
	padding: 0;
	margin: 0;
	list-style: none;
}

.col2 li {
	flex: 1 1 calc(50% - 5px); /* 2列（gap分を引く） */
	margin: 0;
	padding: 0;
}

.col2 img {
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
	height: auto;
}



/*　庭園葬について
------------------------------------------------------------------------------*/
#top_teiensou{
	text-align: center;
	background: #fffeee;
	padding-bottom: 40px;
}

#top_teiensou p{
	font-size: 25px;
}

/*　墓所クリーニング　*/
#top_cleaning{
	text-align: center;
	background-image: url("../images/index/sec_bg.jpg");
	padding-bottom: 20px;
}

#top_cleaning img{
	margin-bottom: 20px;
}

.box_plan {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #1d2088;
    border-radius: 8px;
}

.box_plan .box-title {
    position: absolute;
    top: -20px;
    left: 50%; /* 左端を中央へ */
    transform: translateX(-50%);
    display: inline-block;
    padding: 10px;
    line-height: 1;
    font-size: 22px;
    background: #1d2088;
	color: #fff;
	white-space: nowrap; /* ← 改行させず、1行で表示 */
}
.price{
	color: #ba83b7;
	font-size: 30px;
	font-weight: 600;
}

.price span{
	color: #ba83b7;
	font-size: 20px;
	font-weight: normal;
}

.comments{
	font-size: 16px;
}

.p_daiko{
	font-size: 35px;
	margin-top: 20px;
}

.p_daiko span{
	font-size: 20px;
}


/*　墓石の加工
------------------------------------------------------------------------------*/
#top_kakou{
	text-align: center;
	background: #fffeee;
	padding-bottom: 20px;
}

#top_kakou img{
	margin-bottom: 20px;
}


/*　エクステリア工事　*/
#top_exterior{
	text-align: center;
	background-image: url("../images/index/sec_bg.jpg");
	padding-bottom: 20px;
}
#top_exterior img{
	margin-bottom: 20px;
}

#instagram{
	margin: 30px 0 10px;
}
#instagram img{
	width: 100%;
}

.col2_exterior li{
	display: inline-block;
	width: 47%;
	padding: 0 1%;
	margin: 0 auto;
	}


/*　背景ありロゴ(サイト共通)
------------------------------------------------------------------------------
#logo_bg{
	background: url("../images/common/logo_bg.jpg") no-repeat 100% 100% fixed;
	background-size: cover;
	-webkit-background-size: cover;
	text-align: center;
	padding: 220px 20px;
}

#logo_bg img{
	width: auto;
}*/
/* 共通スタイル */
#logo_bg {
  background: url("../images/common/logo_bg.jpg") no-repeat center center;
  background-size: cover;
  background-attachment: fixed; /* PC向け */
  text-align: center;
  padding: 220px 20px;
  color: #fff; /* 白文字など任意で */
}

#logo_bg img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* スマホ（640px以下）向けスタイル */
@media (max-width: 640px) {
  #logo_bg {
    background-attachment: scroll; /* スマホでは fixed 無効化 */
    background-position: center top; /* 背景の見切れ防止 */
    padding: 120px 15px; /* 余白も調整 */
  }
}



/*　会社情報(サイト共通)
------------------------------------------------------------------------------*/
#company{
	padding-top: 50px;
	background: #fffeee;
}

#company h2{
	display: none;
}


.company_box{
	margin: 20px auto;
}

.company_box ul.col2 {
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap; /* スマホ時に折り返しを許可 */
}

.company_box ul.col2 > li {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px; /* 必要に応じて調整 */
}

.company_table {
  border-collapse: collapse;
  width: 100%;
}

.company_table td {
  padding: 4px 8px;
  vertical-align: top;
}

/* スマホ向け：長すぎる単語を折り返し */
.company_table td:last-child {
  word-break: break-word;
}


/* 【トップページ】（index.html）のRESPONSIVE設定
------------------------------------------------------------------------------*/
/* ▼ スマホ・ipadAir（幅820px以下）の場合、一列表示にする */
@media screen and (max-width: 820px) {
    .company_box ul.col2 {
        flex-direction: column; /* 縦並び */
    }

    .company_box ul.col2 > li {
        min-height: auto;
        width: 100%;
    }
}


@media screen and (max-width: 640px) {
  .company_table td.label {
    white-space: nowrap;         /* ← 改行させない */
    min-width: 100px;            /* ← 幅の最低値を保証 */
    width: 35%;                  /* ← テーブル内での比率を広めに */
  }

  .company_table td {
    word-break: break-word;      /* ← 長いテキストも折り返す */
    font-size: 14px;
  }
}


@media only screen and (max-width: 799px){
	#top_teiensou p{
		font-size: 20px;
		line-height: 1.5;
	}
	.comments{
		font-size: 12px;
	}
	.p_daiko{
		font-size: 20px;
		margin-top: 20px;
		line-height: 1.2;
	}
	.p_daiko span{
		font-size: 16px;
	}
	.box_plan .box-title {
		font-size: 18px;
	}
}




/*/////////////////////////////////////////////////////////////////////////////

 【下層ページ】墓石について（boseki.html）

/////////////////////////////////////////////////////////////////////////////*/

#boseki_01{
	margin-top: 30px;
}

#mainImg_boseki {
	position: relative;
	overflow: hidden;
	width: 100%;
}

#mainImg_boseki .header_txt {
	position: relative;
	width: 100%;
	height: 75vh;
	background-image: url("../images/boseki/header_pc.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#mainImg_boseki .header_txt p {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	color: #1d2088;
	background: rgba(255, 255, 255, 0.7);
	font-size: 35px;
	line-height: 1;
	padding: 20px 30px;
}

.boseki_topmessage{
	font-size: 25px;
	margin-bottom: 20px;
}

.boseki_box2 {
    margin: 2em 0;
    background: #fffeee;
	border: 3px solid #ba83b7;
	border-radius: 15px; 
}
.boseki_box2 .box-title {
    font-size: 1.2em;
    background: #ba83b7;
    padding: 4px;
    text-align: center;
    color: #FFF;
    letter-spacing: 0.05em;
	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.boseki_box2 p {
    padding: 15px 20px;
    margin: 0;
}

#boseki_01 h3 {
	color: #ba83b7;
	margin-bottom: 20px;
}

.boseki_box3 {
    margin: 40px 0 20px;
    background: #ba83b7;
	border-radius: 15px;
	color: #fff;
	text-align: center;
	font-size: 25px;
}

#boseki_02{
	margin-top: 20px;
}

.boseki_subttl{
	font-size: 25px;
	margin: 30px 0 20px;
	text-align: center;
}

.hakajimai_box {
  margin-bottom: 20px;
  overflow: hidden; /* float崩れ防止 */
}

.img_wrap {
  float: right;
  margin-left: 20px;
  margin-bottom: 10px;
}

.img_wrap img {
  display: block;
  max-width: 100%;
  height: auto;
}

#boseki_03{
}


/* 【下層ページ】墓石について（boseki.html）のRESPONSIVE設定
------------------------------------------------------------------------------*/
/* スマホ用：画面幅が768px以下のとき */
@media screen and (max-width: 768px) {
	#mainImg_boseki .header_txt {
		background-image: url("../images/boseki/header_sp.jpg");
		height: 40vh;
  }
	#mainImg_boseki .header_txt p {
		font-size: 20px;
}
}

@media screen and (max-width: 768px) {
  .img_wrap {
    float: none;
    margin: 0 auto 10px;
    text-align: center;
  }

  .img_wrap img {
    width: 100%;
  }
}

@media only screen and (max-width: 799px){
	#mainImg_boseki{
		padding-top: 50px;
		z-index: -100;
	}
	.boseki_topmessage{
		font-size: 18px;
	}
	.boseki_box3 {
		font-size: 18px;
		line-height: 1.2;
		padding: 10px;
	}
	.boseki_subttl{
	font-size: 18px;
	}
}



/*/////////////////////////////////////////////////////////////////////////////

 【下層ページ】お問い合わせ（contact.html）

/////////////////////////////////////////////////////////////////////////////*/

#contact{
	margin-top: 30px;
}

#contact h2{
	display: none;
}

#mainImg_contact {
	position: relative;
	overflow: hidden;
	width: 100%;
}

#mainImg_contact .header_txt {
	position: relative;
	width: 100%;
	height: 75vh;
	background-image: url("../images/contact/header_pc.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#mainImg_contact .header_txt p {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	color: #1d2088;
	background: rgba(255, 255, 255, 0.7);
	font-size: 35px;
	line-height: 1;
	padding: 20px 30px;
}

.contact_box{
	text-align: center;
	margin-top: 50px;
}

.contact_kind{
	font-size: 25px;
	margin-bottom: 20px;
}

.contact_box_tel {
    margin: 40px 0 20px;
    background: #ba83b7;
	border-radius: 15px;
	color: #fff;
	text-align: center;
	font-size: 60px;
	line-height: 0.8em;
	letter-spacing: 6px;
	padding-top: 20px;
	padding-bottom: 10px;
}

.contact_box_tel:hover {
	background: #1d2088;
	transition: background 0.3s;
}

.contact_box_tel .time {
	font-size: 25px;
}

#contact_mailform{
	max-width: 100%;
	overflow-x: hidden;	
	margin-top: 20px;
}


/*　個人情報について　*/
.accordion {
  margin: 2em 0;
}
.accordion__summary {
  display: block;
  background: #fff; /* 見出しの背景色 */
  font-weight: bold;
  position: relative;
  list-style: none; /* 矢印を消す */
  cursor: pointer;
  padding: 10px 38px 10px 10px;
	border: #1d2088 solid 1px;
}
.accordion__summary::-webkit-details-marker {
  display: none;
}
.accordion__summary::after {
  content: "+";
  font-size: 1.4em; /* 記号のサイズ */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.accordion[open] .accordion__summary::after {
  content: "−";
}
.accordion__detail {
  padding: 4px 10px;
  margin: 10px 0;
	text-align: left;
}
.accordion__text {
  margin: 0;
}

.pp_ttl{
	font-size: 1.2em;
	font-weight: 600;
}
.pp_subttl{
	font-weight: 600;
}

ul.custom-list {
  list-style-type: disc; /* ドットに設定 */
  padding-left: 20px; /* 左のインデントを調整 */
	margin-bottom: 20px;
}

ul.custom-list li {
}


/* 【下層ページ】お問い合わせ（contact.html）のRESPONSIVE設定
------------------------------------------------------------------------------*/
/* スマホ用：画面幅が768px以下のとき */
@media screen and (max-width: 768px) {
	#mainImg_contact .header_txt {
		background-image: url("../images/contact/header_sp.jpg");
		height: 40vh;
  }
	#mainImg_contact .header_txt p {
		font-size: 20px;
}
}

@media only screen and (max-width: 799px){
	#mainImg_contact{
		padding-top: 50px;
		z-index: -100;
	}
	.contact_box{
		margin-top: 30px;
	}
	.contact_kind{
		font-size: 20px;
		margin-bottom: 10px;
	}
	.contact_box_tel {
		font-size: 30px;
		line-height: 0.9em;
		padding-bottom: 10px;
		margin: 10px 0;
		letter-spacing: normal;
	}
	.contact_box_tel .time {
		font-size: 16px;
	}
}


/*/////////////////////////////////////////////////////////////////////////////

　RESPONSIVE 設定【サイト共通】

/////////////////////////////////////////////////////////////////////////////*/


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

　800px以上の画面サイズのデバイス（大きなタブレット、デスクトップPCなど）に適用。

-----------------------------------------------------------------------------*/
@media only screen and (min-width: 800px){
	body{
		font-size:20px;
	}
	
  a#menu{
		display:none;
	}	

	.panel{
		display:block !important;
	}

	#mainnav li{
		display: inline-block;
		padding: 15px 20px;
		font-size: 18px;
	}
	
	#footer{
		padding: 0 10px 90px 0;
	}
}


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

　画面幅が 640ピクセル以下 のデバイスにだけ適用。

------------------------------------------------------------------------------*/
@media (max-width: 640px) {
  .col2 li {
    flex: 1 1 100%;
  }
}


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

　画面幅640px以下のすべてのデバイス。主にスマートフォン向け。

------------------------------------------------------------------------------*/
@media only screen and (max-width: 640px){
	.inner{
		width: 94%;
		padding-bottom: 20px;
	}
	.inner_col{
		width: 94%;
	}
	
	#logo_bg{
		padding: 50px 20px;
	}
}


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

　画面幅799px以下のデバイス。タブレット縦向き、小さめのラップトップや大きめのスマホなど。

------------------------------------------------------------------------------*/
@media only screen and (max-width: 799px){
	#header{
		position: fixed;
		width: 100%;
		z-index: 500;
	}
	
	#headerWrap{
		position: relative;
		width: 100%;
		height: 40px;
		background: #ba83b7;
	}
	
	#header h1{
		padding-top: 5px;
		color: #fff;
		font-size: 25px;
		letter-spacing: normal;
	}

  a#menu{
  	display: inline-block;
  	position: relative;
  	width: 40px;
  	height: 40px;
  	margin: 10px;
	}

	#menuBtn{
  	display: block;
  	position: absolute;
  	top: 40%;/*ボタン位置調整（初期値50%）*/
  	left: 50%;
  	width: 18px;
  	height: 2px;
  	margin: -1px 0 0 -7px;
  	background: #fff;
  	transition: 0.2s;
	}

	#menuBtn:before, #menuBtn:after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width: 18px;
  	height: 2px;
  	background: #fff;
  	transition: 0.3s;
	}

	#menuBtn:before{
  	margin-top: -7px;
	}

	#menuBtn:after{
  	margin-top: 5px;
	}

	a#menu .close{
  	background: transparent;
	}

	a#menu .close:before, a#menu .close:after{
  	margin-top: 0;
	}

	a#menu .close:before{
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{
  	transform: rotate(-135deg);
  	-webkit-transform: rotate(-135deg);
	}

	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		position: relative;
		left: 0;
		top: -17px;
		z-index: 100;
	}

	#mainnav{
		position: absolute;
		top: 0;
		width: 100%;
		text-align: right;
		z-index:500;
	}

	#mainnav ul{
		border-bottom: 1px solid #ccc;
		background: #fff;
		text-align: left;
	}

	#mainnav li a{
		position: relative;
		display:block;
		padding:15px 25px;
		border-bottom: 1px solid #ccc;
		color: #000;
		font-weight: 400;
	}

	#mainnav li a:before{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 5px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #000;
		border-right: solid 2px #000;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#mainImg{
		padding-top: 60px;
		z-index: -100;
	}
	
	section h2{
		font-size: 22px;
		margin: 0 auto 20px;
		line-height: 1.2;
		padding: 0.5em;
	}
	section h3{
		margin: 0 auto 20px;
		font-size: 20px;
		line-height: 1.5;
	}
	#footer{
		padding: 0 10px 90px 0;
	}
	.link_box {
		font-size: 18px;
		padding: 0.5em 1.5em;
	}
}



/*/////////////////////////////////////////////////////////////////////////////

　RESPONSIVE 設定【その他/特定部分】

/////////////////////////////////////////////////////////////////////////////*/

/* ヘッダー
------------------------------------------------------------*/
/* スマホ画面向け */
@media screen and (max-width: 768px) {
#mainImg {
    font-size: 14px;
    padding: 15px 0 40px;
    background-position: center top;
}

#mainImg img {
    height: auto;
    max-width: 100%;
}
#mainImg h2{
	font-size: 20px;
	margin-bottom: 15px;
}
.img-caption {
    bottom: 0;
    right: 0;
    padding: 6px 10px;
}
.img-caption .highlight {
    font-size: 18px;
}
}

/*スマホでの表示位置を調整*/
@media only screen and (max-width: 799px){
	#mainImg {
		padding-top: 40px;
	}
}

/* pc（768px） */
@media screen and (min-width: 1025px) {
  .img-caption {
    right: 20% !important;
    bottom: 5% !important;
  }
}

/* iPad mini 縦（768px） */
@media screen and (min-width: 768px) and (max-width: 819px) {
  .img-caption {
    right: 10%;
    max-width: 50%;
    text-align: left;
	  bottom: 80px;
  }
}

/* iPad Air（820px〜1024px） */
@media screen and (min-width: 820px) and (max-width: 1024px) {
  .img-caption {
    right: 1%;
    max-width: 50%;
    text-align: left;
  }
}



/*pro Airのメニューが2行になるのを防止*/
@media (max-width: 1280px) and (min-width: 820px) {
	#mainnav li{
		padding: 10px 5px;
		font-size: 16px;
	}
}