@charset "utf-8";



body {
  font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


a:link{
	color:#09f;
	text-decoration:none;
}

a:visited{
	color:#09f;
	text-decoration:none;
}

a:hover{
	color:#d7f;
	text-decoration:none;
}


/* .negative-margin（スムーススクロール Fixedメニュー用） */
.negative-margin50 > a {
    display: block; padding-top: 50px; margin-top: -50px;
}


/* デフォルトフォントサイズ　3段階 　※これ（ルート)をもとに各所rem（ルートに対する割合）で表示 */

/* 599px以下 */
@media (max-width: 599px) {
  :root {
    font-size: 14px;
  }
}


/* 600～799px画面 */
@media (min-width: 600px) and (max-width: 799px) {
  :root {
    font-size: 16px;
  }
}


/* 800px以上 */

@media (min-width: 800px) {
  :root {
    font-size: 18px;
  }
}







/* ヘッダー */

header {
  position: absolute;
  top: 0px; /* リセットではなくメニューfixed時に margin-topされないよう */
  left: 0px; /* リセットではなくメニューfixed時に margin-topされないよう */
  z-index: 999;
  width: 100%;
  background-color: rgba(0,0,60,0.5);
}

.not-overlay header {
	position: static;
	border-bottom: solid 0px #ccc;
}



/* 【PC版】（768px＝iPad超の場合）header  */
@media (min-width: 768px) {

header {
  position: absolute;
  top: 0px;/* リセットではなくメニューfixed時に margin-topされないよう */
  left: 0px;/* リセットではなくメニューfixed時に margin-topされないよう */
  z-index: 999;
  width: 100%;
  background-color: rgba(0,0,60,0.8);
  }

.not-overlay header {
  position: static;
  border-bottom: solid 0px #ccc;
}

} /* ← 閉じカッコ */






/* メインメニュー fixed */

.head-fixed,
.not-overlay .head-fixed {
  position: fixed;
}

.not-overlay .head-fixed + *{
  margin-top: 50px;
}







/* 【PC版】（768px＝iPad超の場合）header .container  */

@media (min-width: 768px) {
  header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    }
	
} /* ← 閉じカッコ */






/* header1 上部左上 タイトルロゴ部分　現在は全角スぺ（テキストで掲載可 WEBフォント） */

.header1{
  display: inline-block;
  line-height: 50px;
  padding: 0px 0px;
  /* 指定せず　background-color:;　*/
  color: #fff;
  font-family: 'Caveat', cursive;
  font-weight:bold;
  font-size: 30px;
  text-decoration: none;
}


.header1 a,.header1 a:visited {
  display: inline-block;
  line-height: 50px;
  padding: 0px 30px;
  /* 指定せず　background-color:;　*/
  color: #fff;
  font-family: 'Caveat', cursive;
  font-weight:bold;
  font-size: 30px;
  text-decoration: none;
}


.header1 a:hover {
  display: inline-block;
  line-height: 50px;
  padding: 0px 30px;
  /* 指定せず　background-color:;　*/
  color: #999;
  font-family: 'Caveat', cursive;
  font-weight:bold;
  font-size: 30px;
  text-decoration: none;
}




/* header2　メインnav のクラス（nav class="header2" ＝ メニュー部分） */

.header2 ul {
  list-style: none;
  text-align:center;
  font-style:italic;
  font-weight:600;
  font-family: 'Cantarell', sans-serif;
  background-color: rgba(0,0,60,0.8); /* 小さい画面でのみ トグルでスライドインする ul の背景色を指定 */
}



/* 【PC版】（768px＝iPad超の場合）.header2 ul  */

@media (min-width: 768px) {
  .header2 ul {
  display: flex;
  background-color: rgba(0,0,60,0.0); /* 大きい画面では li項目の背景を透明に矯正 → headerの色と同じにする */
  }
}



.header2 a,.header2 a:visited {
	display: block;
	padding: 16px 16px;
	color:#fff;
	font-size: 16px;
	text-decoration: none;
}

.header2 a:hover {
  /* background-color: rgba(0,0,60,0.2); */
  color:#f6c;
}









/* header3　ハンバーガーメニューアイコン */


/* 【SP版】（767px以下＝モバイル）環境では　タイトルロゴとボタンを両端配置 */
@media (max-width: 767px) {

  header .container_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    }

  .header3 {
    color:#fff;
    padding:2px 6px 2px 6px;
    margin-right: 15px;
    outline: none;
    background: none;
    font-size: 24px;
    opacity: 0.9;
    cursor: pointer;
    border: 1px solid #fff;
	}

  .header3:hover {
    background:#fff;
    color:#006;
    }

  .header2 {
    display: none;
    }  /* 小さい画面では header2（メニュー）を隠す */


}


/* 【PC版】（768px＝iPad超の場合）PCブラウザでは display: none */
@media (min-width: 768px) 
{
  .header3 {
    display: none;
    } /* 大きい画面では header3（ハンバーガーメニューボタン）を隠す */

  .header2 {
    display: block !important;
    } /* 大きい画面でまで非表示になる不具合回避！　header2（メニュー）はdisplay: block ！最優先で!important  */


}













/* button */

a.button16_navy1 {
  display: inline-block;
  margin-top: 0px;
  padding: 14px 30px;
  border: solid 2px #fff;
  border-radius: 8px;
  background-color:#006;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
}

a.button16_navy1:visited {
  display: inline-block;
  margin-top: 0px;
  padding: 14px 30px;
  border: solid 2px #fff;
  border-radius: 8px;
  background-color:#006;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
}


a.button16_navy1:hover {
  color: #fff;
  background-image: linear-gradient(
  rgba(0,255,255,0.5),
  rgba(0,255,255,0.2)
  );
}




/* PageTopへ戻るボタン */

#page-top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  font-size: 80%;
  font-style:normal;
  font-weight:normal;
  font-family: 'Cantarell', sans-serif;
}

#page-top a {
  background-color: rgba(0,0,60,0.8);
  text-decoration: none;
  color: #fff;
  width: 60px;
  line-height: 60px;
  padding: 0px 0;
  text-align: center;
  display: block;
  border-radius: 100px;
}

#page-top a:hover {
  text-decoration: none;
  background-color: rgba(0,0,60,0.9);
}








/* icon */


/* contents2 メニューアイコン用（desktop等） */
.icon1 {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 80px;
  width: 2em;
  line-height: 2em;
  border-radius: 10%;
  text-align: center;
  background-color: #f0f0f0;
  color: #006;
}


/* contact アイコン用（phone mail等） */
.icon1-1 {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 50px;
  width: 2em;
  line-height: 2em;
  border-radius: 50%;
  text-align: center;
  background-color: #f0f0f0;
  color: #006;
}



/* SNSアイコン用 */
.icon2 {
  display: inline-block;
  padding:0px;
  font-size: 24px;
  width: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  text-align: center;
  background-color: #f0f0f0;
  color: #006;
}


a.icon2:visited {
  display: inline-block;
  padding:0px;
  font-size: 24px;
  width: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  text-align: center;
  background-color: #f0f0f0;
  color: #006;
}

a.icon2:hover {
  display: inline-block;
  padding:0px;
  font-size: 24px;
  width: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  text-align: center;
  background-color: #cdf;
  color: #33f;
}


/* ハンバーガーメニューアイコン用 */






















/* CONTENTS1 */

.contents1 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-image:url(../images/bg/heroimage1.jpg);
  min-height: 450px;
  background-position: center top;
  background-size: cover;
  text-align: center;
  color:#008;
}




/* サブページ【lowheightヘッダ仕様ページ】では .contents1部分 を クラス.contents1.lowheight_X で設定を上書きする仕様 */


/* lowheight_a */
.contents1.lowheight_a {
  height: 300px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/bg/heroimage3.jpg) ;
  background-position:bottom center;
  color:#fff;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）.contents1.lowheight_a 大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_a {
  height: 300px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/bg/heroimage3.jpg) ;
  background-position:bottom center;
  color:#fff;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:10%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */




/* lowheight_b */
.contents1.lowheight_b {
  height: 300px;
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/bg/heroimage4.jpg) ;
  background-position:bottom center;
  color:#fff;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）.contents1.lowheight_b 大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_b {
  height: 300px;
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/bg/heroimage4.jpg) ;
  background-position:bottom center;
  color:#fff;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:10%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */





/* lowheight_c */
.contents1.lowheight_c {
  height: 300px;
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), url(../images/bg/heroimage5.jpg) ;
  background-position:bottom center;
  color:#fff;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）.contents1.lowheight_c 大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_c {
  height: 300px;
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), url(../images/bg/heroimage5.jpg) ;
  background-position:bottom center;
  color:#fff;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:10%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */











/* TOP メインタイトル */
.contents1 h1.title {
  margin-top: 0px;
  margin-bottom: 10px;
  font-size: 16vw;
  font-style:italic;
  font-family: 'Cantarell', sans-serif;
}

/* list関連ページでは ヘッダ部分 ＝ h1.title_sub */
.contents1 h1.title_sub {
  margin-top: 0;
  margin-bottom: 0;
  font-size:9vw;
  font-weight:600;
  font-style:italic;
  font-family: 'Cantarell', sans-serif;
}




/* index.html ヘッダ部分 サブタイトル＝.catch1 */
.contents1 .catch1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size:22px;
  font-weight:600;
  font-style:italic;
  font-family: 'Cantarell', sans-serif;
}




/* 【PC版】（768px＝iPad超の場合）.contents1  大きい画面版 */
@media (min-width: 768px) {
  .contents1 h1.title {
  font-size:120px;
  }
  /* list関連ページでは ヘッダ部分 ＝ h1.title_sub 大きい画面版 */
  .contents1 h1.title_sub {
  font-size:60px;
  }
  /* index.html ヘッダ部分 サブタイトル＝.catch1 大きい画面版 */
  .contents1 div.catch1 {
  font-size:30px;
  }

} /* ← 閉じカッコ */









/* contents1-list01（リスト項目01ゾーン TOP他各頁で引用可） */


.contents1-list01 {
  /* 指定せず　background:; */
}


.contents1-list01 .container {
  display: flex;
  flex-wrap: wrap;
  max-width:1200px; /* max-width値の変更で段組数にも変化　例：max-width 1000 で 300widthのカード（上下型）が３段組　カードの個数（最後行のあまり等）に応じて都度変更も */
  margin-left:auto;
  margin-right:auto;
}

.contents1-list01 article {
  flex: 1 1 300px;
  display: flex;
}



.contents1-list01 a {
  flex: 1;
  margin: 10px;
  display: block;
  border: solid 1px #cfcfcf;
  color: inherit;/* 通常では継承しない親要素のプロパティを → 強制的に継承　inheritにしないとルートのリンク色に */
  text-decoration: none;
}

.contents1-list01 a:hover {
  opacity: 0.8;
}

.contents1-list01 .photo-box {
  min-height: 150px;
  background-position: center;
  background-size: cover;
}

.contents1-list01 .text-box {
  line-height:180%;
  margin: 10px;
}

.contents1-list01 h2 {
  font-size: 18px;
}

.contents1-list01 p {
  font-size: 14px;
  opacity: 0.9;
}





/* contents1-list02（リスト項目02ゾーン TOP他各頁で引用可） */

.contents1-list02 {
  background:#eef1f6; /* MIYABI適用グレー色 */
}


.contents1-list02 .container {
  display: flex;
  flex-wrap: wrap;
  max-width:1000px; /* max-width値の変更で段組数にも変化 */
  margin-left:auto;
  margin-right:auto;
}

.contents1-list02 article {
  flex: 1 1 384px; /* カード１つあたりを 384pxにすることで 384ｘ2＝768pxをブレークポイントに。＆ max-width値 1000pxなら 大きい画面でも最大２段組 */
  display: flex;
}


.contents1-list02 a {
  flex: 1;
  margin: 10px;
  display: flex; /* flexにして 子要素 .photo-box：.text-box 比率を指定　２：３ */
  color: inherit;/* 通常では継承しない親要素のプロパティを → 強制的に継承　inheritにしないとルートのリンク色に */
  text-decoration: none;
  border: solid 1px #eef1f6; /* リンク部分（a要素）にボーダー */
  background:#fff; /* リンク部分（a要素）に背景色 */
}

.contents1-list02 a:hover {
  opacity: 0.8;
}

.contents1-list02 .photo-box {
  flex:2; /* 親要素 a のflexに対して 子要素 .photo-box：.text-box 比率を指定　２：３ */
  min-height: 150px; /* オリジナル追記　テキストの量が少ない場合に依存せず 高さを一定にする？ */
  background-position: center;
  background-size: cover;
}

.contents1-list02 .text-box {
  line-height:180%;
  flex:3; /* 親要素 a のflexに対して 子要素 .photo-box：.text-box 比率を指定　２：３ */
  margin: 10px;

}

.contents1-list02 h2 {
  font-size: 18px;
  font-style:italic;
  font-weight:700;
  font-family: 'Cantarell', sans-serif;
}

.contents1-list02 p {
  font-size: 14px;
  opacity: 0.9;
}






/* contents1-list03（リスト項目03ゾーン TOP他各頁で引用可） */



.contents1-list03 {
  /* 指定せず　background:; */
}


.contents1-list03 .container {
  display: flex;
  flex-wrap: wrap;
  max-width:990px; /* max-width値の変更で段組数にも変化 */
  margin:0px auto;
}

.contents1-list03 article {
  flex: 1 1 250px;
  display: flex;
}


.contents1-list03 a {
  position:relative;
  flex: 1;
  margin: 1px;
  display: block;
  border: solid 0px #cfcfcf;
  background-color:#003; /* （画像半透明にしたときの）aゾーン全体の bgカラー指定 */
  color: inherit;/* 通常では継承しない親要素のプロパティを → 強制的に継承　inheritにしないとルートのリンク色に */
  text-decoration: none;
}

.contents1-list03 a:hover {
  opacity: 0.8;
}

.contents1-list03 .photo-box {
  min-height: 250px;
  background-position: center;
  background-size: cover;
  opacity:0.5; /* photo-box自体を半透明にして 背景色のトーンに */
}

.contents1-list03 .text-box {
  line-height:180%;
  position:absolute;
  bottom:0px;
  left:0px;
  margin: 10px;
  color:#fff;
}

.contents1-list03 h2 {
  font-size: 18px;
  margin: 0px;
  font-style:italic;
}

.contents1-list03 p {
  font-size: 14px;
  margin: 0px;
  opacity: 0.9;
}









/* CONTENTS2 */

/*  ネガティブマージンは .negative-margin50 > a  でclass指定
.contents2 {
  margin-top: -50px; * 固定ナビの高さ分のネガティブマージン *
  padding-top: 50px; * 打ち消し用のパディング *
}
*/

.contents2 .container {
  padding:40px 0px;
}

.contents2 .text-box {
  text-align: center;
  padding:10px 20px 50px 20px;
}

.contents2 h2 {
  margin-bottom:10px;
  font-size:20px;
}

.contents2 p {
  margin-bottom:20px;
  font-size:15px;
  line-height:180%;
  color:#666;
}




/* 【PC版】（768px＝iPad超の場合）.contents2  */

@media (min-width:768px) {
  .contents2 .container{
  display:flex;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  }

  .contents2 .text-box{
  flex:1;
  }

} /* ← 閉じカッコ */










/* CONTENTS3 */

.contents3 {
  background:#efefef;
}

.contents3 .text-box{
  padding:20px;
}

.contents3 h2 {
  margin-bottom:10px;
  font-size:30px;
  line-height:180%;
  color:#000;
}

.contents3 p {
  margin-bottom:20px;
  font-size:15px;
  line-height:180%;
  color:#666;
}

.contents3 .photo-box {
  min-height: 400px;
  background-image: url(../images/cut/cut_top01.jpg);
  background-position: center;
  background-size: contain;
}




/* 【PC版】（768px＝iPad超の場合）.contents3  */

@media(min-width:768px){

  .contents3 .container{
    display:flex;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
  }

  .contents3 .photo-box{
    flex:1;
  }

  .contents3 .text-box{
    flex:1;
    padding:50px;
  }

} /* ← 閉じカッコ */





/* CONTENTS4 */


.contents4 {
  /* 指定せず　background:; */
}

.contents4 .container {
  background:#fff;
  padding:1px 0px;
}

.contents4 h2 {
  margin-bottom:10px;
  font-size:30px;
  line-height:180%;
  color:#000;
}

.contents4 p {
  margin-bottom:20px;
  font-size:15px;
  line-height:180%;
  color:#666;
}

.contents4 .photo-box {
  min-height: 400px;
  background-image: url(../images/cut/cut_top02.jpg);
  background-position: center;
  background-size: cover;
}

.contents4 .text-box{
  padding:20px;
}


/* 【PC版】（768px＝iPad超の場合）.contents4  */

@media(min-width:768px){

  .contents4 .container{
    display:flex;
    flex-direction:row-reverse;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding:50px 15px;
  }

  .contents4 .photo-box{
    flex:0 0 400px;
    border-radius: 20px;
  }

  .contents4 .text-box{
  flex:1;
  padding:50px;
  }

} /* ← 閉じカッコ */
















/* CONTENTS4-1 */
/* 複数行のテキストを積み重ねる flex-direction: column; または column-reverse */




.contents4-1 {
  /* 指定せず　background:; */
}


.contents4-1 .container {
  background:#fff;
  padding:1px 0px;
}


.contents4-1 h2 {
  margin-bottom:10px;
  font-size:30px;
  line-height:180%;
  color:#000;
}

.contents4-1 p {
  margin-bottom:20px;
  font-size:15px;
  line-height:180%;
  color:#666;
}


.contents4-1 .photo-box {
  min-height: 400px;
  background-image: url(../images/cut/cut_top02.jpg);
  background-position: center;
  background-size: cover;
}

.contents4-1 .text-box{
  padding:20px;
}





/* 【PC版】（768px＝iPad超の場合）.contents4-1  */

@media(min-width:768px){

  .contents4-1 .container{
    display:flex;
    flex-direction:column;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding:50px 15px;
  }

  .contents4-1 .photo-box{
    flex:0 0 400px;
    border-radius: 20px;
  }

  .contents4-1 .text-box{
    flex:1;
    padding:50px;
  }

} /* ← 閉じカッコ */














/* CONTENTS5 */


.contents5 {
  background:#006;
  color:#fff;
}

.contents5 .container {
  padding:0px 0px;
}

.contents5 h2 {
  margin-bottom:10px;
  font-size:30px;
  line-height:180%;
  color:#fff;
}

.contents5 p {
  margin-bottom:20px;
  font-size:15px;
  line-height:180%;
  color:#fff;
}

.contents5 .photo-box {
	min-height: 400px;
	background-image: url(../images/cut/cut_top02.jpg);
	background-position: center;
	background-size: cover;
}

.contents5 .text-box{
  padding:20px;
}



/* 【PC版】（768px＝iPad超の場合）.contents5  */

@media(min-width:768px){

  .contents5 .container{
    display:flex;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding:50px 15px;
  }

  .contents5 .photo-box{
    flex:1;
    border-radius: 20px;
  }

  .contents5 .text-box{
  flex:1;
  padding:50px;
  }

} /* ← 閉じカッコ */












/* CONTENTS6 */


.contents6 {
  background:url(../images/bg/bussiness01.jpg);
  background-position:left;  /* 小さい画面（SPで表示）の時 背景画像の位置に注意 */
  background-size:cover;
}

.contents6 .container {
  padding:0px 0px;
}

.contents6 h2 {
  margin-bottom:10px;
  font-size:30px;
  line-height:180%;
  color:#fff;
}

.contents6 p {
  margin-bottom:20px;
  font-size:15px;
  line-height:180%;
  color:#fff;
}

.contents6 .photo-box {
  min-height: 400px;
  background-image: none;
  background-position: center;
  background-size: cover;
}

.contents6 .text-box{
  padding:20px;
  background-color:rgba(0,0,0,0.7)
}



/* 【PC版】（768px＝iPad超の場合）.contents6  */

@media(min-width:768px){

  .contents6 .container{
    display:flex;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding:50px 15px;
  }

  .contents6 .photo-box{
    flex:1;
  }

  .contents6 .text-box{
    flex:1;
    border-radius: 20px;
    padding:50px;
  }

} /* ← 閉じカッコ */

















/* footer */


footer{
  color:#fff;
  background:#005;
}


footer .container{
  padding:50px 20px;
  text-align:center;
}






/* .footer_inner1 */


.footer_inner1 h2 {
  margin: 0px 0px 10px 0px;
  line-height:200%;
  font-size: 6vw;
  font-weight:bold;
  font-family: 'Cantarell', sans-serif;
}

.footer_inner1 p {
  margin: 0px 0px 0px 0px;
  font-size: 3.5vw;
  color:#fff;
  font-style:italic;
  line-height:200%;
  font-weight:normal;
  font-family: 'Cantarell', sans-serif;
  text-align:center;
}

.footer_inner1 a {
  color:#fff;
  text-decoration: none;
}




/* 【PC版】（768px＝iPad超の場合）.footer_inner1  */

@media (min-width: 768px) {

.footer_inner1 h2 {
  margin: 0px 0px 10px 0px;
  line-height:200%;
  font-size: 4vw;
  font-family: 'Cantarell', sans-serif;
}


.footer_inner1 p {
  font-size:2vw;
  color:#fff;
  font-style:italic;
  line-height:200%;
  font-weight:normal;
  font-family: 'Cantarell', sans-serif;
  text-align:center;
  }

} /* ← 閉じカッコ */




/* .footer_inner2　SNS */

.footer_inner2 {
  margin-top: 20px;
  text-align:center;
}










/* .footer_inner3　copyrights */

.footer_inner3 p {
  margin: 0px 0px 0px 0px;
  font-size: 3.5vw;
  color:#fff;
  font-style:italic;
  line-height:200%;
  font-weight:normal;
  font-family: 'Cantarell', sans-serif;
  text-align:center;
}


/* 【PC版】（768px＝iPad超の場合）.footer_inner2　　 text-align:right; */
@media (min-width: 768px) {

.footer_inner3 p {
  font-size:15px;
  color:#fff;
  font-style:italic;
  line-height:200%;
  font-weight:normal;
  font-family: 'Cantarell', sans-serif;
  text-align:right;
  }

} /* ← 閉じカッコ */












/* 下層ページ web-service.html　contents.html etc.. */
.post .container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 0px; /* .post .containerコンテンツ内 SP版で写真の両端に隙間を作らない → 両端 0pxに設定 */
}


.post h1 {
  color:#006;
  margin:0px 5px;
  padding-left:1.0rem;
  border-left: solid 0.6rem #669;
  font-size: 2.1rem;
  font-style:italic;
  font-weight:600;
  font-family: 'Cantarell', sans-serif;
}


.post p {
  padding: 0px 20px;
  font-size: 0.9rem;
  line-height:200%;
}

.post ul li {
  padding: 0px 15px;
  font-size: 1rem;
  line-height:200%;
}

.post img {
  max-width: 100%;
}






/* .post-image （画像回り込みver） */


.post-image01 {
  /* 指定せず　background:; */
}


.post-image01 .container {
  background:#fff;
  padding:1px 0px;
}


.post-image01 h2 {
  margin-bottom:10px;
  font-size:30px;
  line-height:180%;
  color:#000;
}

.post-image01 p {
  padding: 0px 0px;
  font-size: 0.9rem;
  line-height:200%;
}


.post-image01 .photo-box {
  min-height: 400px;
  background-image: url(../images/cut/cut_dtp01.jpg);
  background-position: center;
  background-size: cover;
}

.post-image01 .text-box{
  padding:20px;
}


/* 【PC版】（768px＝iPad超の場合）.post-image01  */

@media(min-width:768px){

  .post-image01 .container{
    display:flex;
    flex-direction:row-reverse;
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
    padding:50px 15px;
  }

  .post-image01 .photo-box{
    flex:0 0 400px;
    border-radius: 20px;
  }

  .post-image01 .text-box{
    flex:1;
    padding:50px;
  }

} /* ← 閉じカッコ */















/* about.html  history 沿革 */

.history {
  background-color: #69f;
  color: #fff;
	
}

.history .text-box {
  padding: 20px;
}

.history h2 {
  margin-top: 0px;
  margin-bottom: 10px;
  font-size: 1.8rem;
}

.history .photo-box {
  min-height: 260px;
  background-image: url(../images/cut/cut_top01.jpg);
  background-position: center;
  background-size: cover;
}


.history table {
  border-collapse: collapse;
  border-top: solid 1px #fff;
  font-size: 1rem;
}


.history th {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: solid 1px #fff;
  padding-right: 1rem;
  text-align: center;
  word-break: keep-all;/* CJK(中日韓)は改行しない */
}


.history td {
	line-height:150%;
	padding-top: 1.2rem;
	padding-bottom: 1.2rem;
	border-bottom: solid 1px #fff;
}



/* 【PC版】（768px＝iPad超の場合） about.html  history 沿革  */
@media (min-width: 768px) {
	
  .history .container {
    display:flex;
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
    padding:20px 20px;
  }
  

  .history .photo-box {
    flex:1;/* 画像とテキストの横幅比率は１：１ */
    border-radius: 20px;
  }
  
  .history .text-box {
    flex:1;/* 画像とテキストの横幅比率は１：１ */
    padding:50px;
	}
	
} /* ← 閉じカッコ */














/* about.html  .history-ichiran追加作成（カスタマイズ多数） max-width → コンテナで制御　　ゾーン内テーブル → １カラムで表示  */

.history-ichiran {
  background-color: #69f;
  color: #fff;
}


.history-ichiran .container {
  max-width:1000px; /* max-width値 */
  margin:0px auto;
}


.history-ichiran .text-box {
	padding: 0px;
}


.history-ichiran h2 {
  margin-top: 0px;
  margin-bottom: 10px;
  font-size: 1.8rem;
}


.history-ichiran table {
  border-collapse: collapse;
  width: 90%;
  margin-left:auto;
  margin-right:auto;
}


.history-ichiran th,
.history-ichiran td {
  vertical-align:middle;
  line-height:150%;
  font-size:15px;
  padding: 15px 10px;
  border-top: 0px solid #ddd;
  border-left: 0px solid #ddd;
  border-right: 0px solid #ddd;
  border-bottom: 1px solid #ddd;
}


.history-ichiran th {
  /* 指定せず　background:; */
  text-align: center;
  width: 30%;
}



/* （400px＝小さい画面の場合）テーブルを縦に並べて表示  */
@media screen and (max-width: 400px) {
	
  .history-ichiran table {
    border-top: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    width: 100%;
  }
  
  .history-ichiran td {
    display: block;
    text-align: left;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 12px 0px;
    width: 100%;
  }
  
  .history-ichiran th {
    display: block;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 12px 0px;
    width: 100%;
  }

} /* ← 閉じカッコ */














/* contact.html */
.contact-box {
  margin: 20px 10px; /* .post .containerコンテンツ内 SP版で写真の両端に隙間を作らないため 0pxに設定 → 個別に両端マージン対応 */
  padding: 20px;
  border: solid 1px #ccc;
  text-align: center;
}


.contact-box h2 {
  margin-top: 0;
  font-size: 1.6rem;
}


.contact-box a {
  font-size: 1.4rem;
  color: inherit;
  text-decoration: none;
}



/* 【PC版】（768px＝iPad超の場合）contact.html  */
@media (min-width: 768px) {
  
  .contact-wrap {
    display: flex;
  }
  .contact-box {
	flex: 1;/* .contact-box同士が.contact-wrap内でflex（横並び）＝.contact-box同士 横幅比率は１：１ */
  }
  .contact-box:first-child {
	margin-right: 20px;/* 横並びの時の間 ＝ 一番目の子要素だけが右側20px */
  }
  
} /* ← 閉じカッコ */



/* googlemap */
.location iframe {
  width:100%;
  height: 480px;
  vertical-align: bottom;
}

.location h2 {
  font-style:italic;
  font-size:2rem;
  font-weight:normal;
  font-family: 'Cantarell', sans-serif;
  padding: 16px;
  background-color:#006;
  color: #fff;
  text-align: center;
}













/* list01ページ　list01（画像テキスト上下）  */

.list01 .container {
  display: flex;
  flex-wrap: wrap;
  max-width:1200px; /* max-width値の変更で段組数にも変化　例：max-width 1000 で 300widthのカード（上下型）が３段組　カードの個数（最後行のあまり等）に応じて都度変更も */
  margin-left:auto;
  margin-right:auto;
}

.list01 article {
  flex: 1 1 300px;
  display: flex;
}




.list01 a {
  flex: 1;
  margin: 10px;
  display: block;
  border: solid 1px #cfcfcf;
  color: inherit; /* 通常では継承しない親要素のプロパティを → 強制的に継承　inheritにしないとルートのリンク色に */
  text-decoration: none;
}

.list01 a:hover {
  opacity: 0.8;
}

.list01 .photo-box {
  min-height: 150px;
  background-position: center;
  background-size: cover;
}

.list01 .text-box {
  line-height:180%;
  margin: 10px;
}

.list01 h2 {
  font-size: 18px;
}

.list01 p {
  font-size: 14px;
  opacity: 0.9;
}







/* list02ページ　list01（画像テキスト左右）  */

.list02 .container {
  display: flex;
  flex-wrap: wrap;
  max-width:1000px; /* max-width値の変更で段組数にも変化 */
  margin-left:auto;
  margin-right:auto;
}

.list02 article {
  flex: 1 1 384px; /* カード１つあたりを 384pxにすることで 384ｘ2＝768pxをブレークポイントに。＆ max-width値 1000pxなら 大きい画面でも最大２段組 */
  display: flex;
}




.list02 a {
  flex: 1;
 margin: 10px;
 display: flex; /* flexにして 子要素 .photo-box：.text-box 比率を指定　２：３ */
 border: solid 1px #cfcfcf;
 color: inherit;/* 通常では継承しない親要素のプロパティを → 強制的に継承　inheritにしないとルートのリンク色に */
	text-decoration: none;
}

.list02 a:hover {
  opacity: 0.8;
}

.list02 .photo-box {
  flex:2; /* 親要素 a のflexに対して 子要素 .photo-box：.text-box 比率を指定　２：３ */
  min-height: 150px; /* オリジナル追記　テキストの量が少ない場合に依存せず 高さを一定にする？ */
  background-position: center;
  background-size: cover;
}

.list02 .text-box {
  line-height:180%;
  flex:3; /* 親要素 a のflexに対して 子要素 .photo-box：.text-box 比率を指定　２：３ */
  margin: 10px;
}

.list02 h2 {
  font-size: 18px;
}

.list02 p {
  font-size: 14px;
  opacity: 0.9;
}









/* list03ページ　list03（画像半透明＆テキスト重ね表示）  */

.list03 .container {
  display: flex;
  flex-wrap: wrap;
  max-width:1200px; /* max-width値の変更で段組数にも変化 */
  margin:0px auto;
}

.list03 article {
  flex: 1 1 250px;
  display: flex;
}




.list03 a {
  position:relative;
  flex: 1;
  margin: 1px;
  display: block;
  border: solid 1px #cfcfcf;
  background-color:#006; /* （画像半透明にしたときの）aゾーン全体の bgカラー指定 */
  color: inherit;/* 通常では継承しない親要素のプロパティを → 強制的に継承　inheritにしないとルートのリンク色に */
  text-decoration: none;
}

.list03 a:hover {
  opacity: 0.8;
}

.list03 .photo-box {
  min-height: 250px;
  background-position: center;
  background-size: cover;
  opacity:0.5; /* photo-box自体を半透明にして 背景色のトーンに */
}

.list03 .text-box {
  line-height:180%;
  position:absolute;
  bottom:0px;
  left:0px;
  margin: 10px;
  color:#fff;
}

.list03 h2 {
  font-size: 18px;
  margin: 0px;

}

.list03 p {
  font-size: 14px;
  margin: 0px;
  opacity: 0.9;
}



















/* table */

.table_service {
  border-collapse: collapse;
  width: 94%;
  border-top: 1px solid #bbb;
  margin-left:auto;
  margin-right:auto;
}

.table_service th,
.table_service td {
  vertical-align:middle;
  line-height:180%;
  color:#666;
  font-size:16px;
  font-weight:600;
  padding: 15px 10px;
  border-top: 0px solid #ddd;
  border-left: 0px solid #ddd;
  border-right: 0px solid #ddd;
  border-bottom: 1px solid #bbb;
}

.table_service th {
  color:#000;
  background-color: #f0f0f0;
  text-align: center;
  width: 30%;
}

/* （400px＝小さい画面の場合）縦に並べて表示  */
@media screen and (max-width: 400px) {
	
  .table_service {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    width: 100%;
  }
  
  .table_service td {
    display: block;
    text-align: left;
    border: 0px solid #ccc;
    padding: 12px 0px;
    width: 100%;
  }
  
  .table_service th {
    display: block;
    border: 0px solid #ccc;
    padding: 12px 0px;
    width: 100%;
  }
  
} /* ← 閉じカッコ*/









.table_about {
  border-collapse: collapse;
  width: 90%;
  margin-left:auto;
  margin-right:auto;
}

.table_about th,
.table_about td {
  vertical-align:middle;
  line-height:150%;
  color:#666;
  font-size:16px;
  font-weight:600;
  padding: 15px 10px;
  border-top: 0px solid #ddd;
  border-left: 0px solid #ddd;
  border-right: 0px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.table_about td ul li {
  font-size:15px;
  margin-left:20px;
}

.table_about th {
  color:#000;
  background-color: #f0f0f0;
  text-align: center;
  width: 30%;
}

/* （400px＝小さい画面の場合）縦に並べて表示  */
@media screen and (max-width: 400px) {
  .table_about {
    border-top: 1px solid #ddd;
    border-bottom: 0px solid #ddd;
    width: 100%;
  }
  
  .table_about td {
    display: block;
    text-align: left;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 12px 0px;
    width: 100%;
  }
  
  .table_about th {
    display: block;
    background-color: #eee;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 12px 0px;
    width: 100%;
  }
  
} /* ← 閉じカッコ*/






/* ------- フォームセットで  （table_form と input）------- */

.table_form {
  border-spacing: 0;
  border-collapse: collapse;
  width: 95%; /* 【SP版】では 横幅95％ 中央寄せ */
  margin:0px auto;
}


.table_form td{
  border-bottom: 0px solid #ccc;
  color:#333;
  font-size: 1.3rem;
  line-height: 180%;
  padding: 15px 5px;
  vertical-align:middle;
}


/* 【PC版】（768px＝iPad超の場合）form.html  */
@media (min-width: 768px) {

  .table_form {
    border-spacing: 0;
    border-collapse: collapse;
    width: 60%; /* 【PC版】では 横幅60％ 左寄せ */
    margin:20px 60px;
  }
  
} /* ← 閉じカッコ*/





/* PC版SP版兼用 メールフォーム input幅   */

input.width100 {
  width: 100%;
  box-sizing: border-box;
}
 
textarea {
  width: 100%;
  box-sizing: border-box;
}

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









/* FadeThis.js関連 */

.box-wrap {
	width:1180px;
	margin-left:auto;
	margin-right:auto;
}
.box-wrap div {
	display:inline-block;
	width:360px;
	margin:0 10px 0 0;
	padding:0px;
}
.box-wrap div:last-child {
	margin:0;
}









/* 見出し */

.head_under_006 {
  color:#006;
  margin:0px 5px;
  border-bottom:1px solid #ddd;
  padding-left:1.0rem;
  padding-bottom:12px;
  border-left: solid 0rem #669;
  font-size: 1.5rem;
  font-style:italic;
  font-weight:600;
  font-family: 'Cantarell', sans-serif;
}






/* 大きい画面と小さい画面で 左・右・中央 */


/* 特例leftleft ＝ ｐタグなどの命令の中、divで便利に使える 小さな段落 */
.left-left {
  padding: 0px 20px;
  font-size: 0.9rem;
  line-height:200%;
  text-align:left;
}

@media (min-width: 768px) {

.left-left {
  padding: 0px 20px;
  font-size: 0.9rem;
  line-height:200%;
  text-align:left;
  }

} /* ← 閉じカッコ*/




/* 特例centercenter ＝ ｐタグなどの命令の中、divで便利に使える 小さな段落 */
.center-center {
  padding: 0px 20px;
  font-size: 0.9rem;
  line-height:200%;
  text-align:center;
}

@media (min-width: 768px) {

.center-center {
  padding: 0px 20px;
  font-size: 0.9rem;
  line-height:200%;
  text-align:center;
  }

} /* ← 閉じカッコ*/




.left-right {
  padding: 0px 20px;
  font-size: 0.9rem;
  line-height:200%;
  text-align:left;
}

@media (min-width: 768px) {

.left-right {
  padding: 0px 20px;
  font-size: 0.9rem;
  line-height:200%;
  text-align:right;
  }

} /* ← 閉じカッコ*/






.left-center {
  padding: 0px 20px;
  font-size: 0.9rem;
  line-height:200%;
  text-align:left;
}

@media (min-width: 768px) {

.left-center {
  padding: 0px 20px;
  font-size: 0.9rem;
  line-height:200%;
  text-align:center;
  }

} /* ← 閉じカッコ*/





.center-left {
	padding: 0px 0px; /* SP版で中央揃え（余白0px） */
	font-size: 0.9rem;
	line-height:200%;
	text-align:center;
}

@media (min-width: 768px) {

.center-left {
	padding: 0px 40px; /* PC版で右揃え（余白あり） */
	font-size: 1rem;
	line-height:200%;
	text-align:left;
  }

} /* ← 閉じカッコ*/




.center-right {
	padding: 0px 0px; /* SP版で中央揃え（余白0px） */
	font-size: 0.9rem;
	line-height:200%;
	text-align:center;
}

@media (min-width: 768px) {

.center-right {
	padding: 0px 40px; /* PC版で右揃え（余白あり） */
	font-size: 1rem;
	line-height:200%;
	text-align:right;
  }

} /* ← 閉じカッコ*/









/* 共有クラス */


.nowrap { white-space: nowrap; }


.rollover{
	
}


.left { text-align:left; }
.center { text-align:center; }
.right { text-align:right; }





/* list-style-type */

.desimal{
  list-style-type:decimal;
  margin-left:2em;
}

.disc{
  list-style-type:disc;
  margin-left:2em;
}
.circle{
  list-style-type:circle;
  margin-left:2em;
}
.square{
  list-style-type:square;
  margin-left:2em;
}

.list-style-none{
  list-style-type:none;
  margin-left:2em;
}







/* border */


.border_666{
  border:solid 1px #666;
}

.border_999{
  border:solid 1px #999;
}

.border_ccc{
  border:solid 1px #ccc;
}



.border_radius10 {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.border_radius20 {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}

.border_radius30 {
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
}

.border_radius50 {
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
}

.border_radius100 {
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
}

.border_radius200 {
    border-radius: 200px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
}

.border_radius250 {
    border-radius: 250px;
    -webkit-border-radius: 250px;
    -moz-border-radius: 250px;
}





.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
 
.clearfix { display: inline-table; }
 
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */







img.fl { float: left; }
img.fr { float: right; }

img.float_left { 
	float: left;
	margin-right:30px;
	margin-bottom:10px;
}

img.float_right { 
	float: right;
	margin-left:30px;
	margin-bottom:10px;
}





img.border_999 {
	border:solid 1px #999;
}

img.border_ccc {
	border:solid 1px #ccc;
}

img.border_ddd {
	border:solid 1px #ddd;
}

img.border_eee {
	border:solid 1px #eee;
}

img.border_fff {
	border:solid 1px #fff;
}






.letter-spacing_01em {letter-spacing: 0.1em;}
.letter-spacing_02em {letter-spacing: 0.2em;}
.letter-spacing_03em {letter-spacing: 0.3em;}
.letter-spacing_05em {letter-spacing: 0.5em;}
.letter-spacing_1em {letter-spacing: 1em;}
.letter-spacing_15em {letter-spacing: 1.5em;}
.letter-spacing_2em {letter-spacing: 2em;}
.letter-spacing_25em {letter-spacing: 2.5em;}
.letter-spacing_3em {letter-spacing: 3em;}


.lh120{line-height:120%;}
.lh130{line-height:130%;}
.lh140{line-height:140%;}
.lh150{line-height:150%;}
.lh160{line-height:160%;}
.lh180{line-height:180%;}
.lh200{line-height:200%;}
.lh220{line-height:220%;}
.lh240{line-height:240%;}
.lh260{line-height:260%;}
.lh280{line-height:280%;}
.lh300{line-height:300%;}


.font7 { font-size:7px; }
.font8 { font-size:8px; }
.font9 { font-size:9px; }
.font10 { font-size:10px; }
.font11 { font-size:11px; }
.font12 { font-size:12px; }
.font13 { font-size:13px; }
.font14 { font-size:14px; }
.font15 { font-size:15px; }
.font16 { font-size:16px; }
.font17 { font-size:17px; }
.font18 { font-size:18px; }
.font20 { font-size:20px; }
.font24 { font-size:24px; }
.font28 { font-size:28px; }
.font30 { font-size:30px; }
.font36 { font-size:36px; }
.font48 { font-size:48px; }
.font60 { font-size:60px; }

.font-xx-small { font-size:xx-small; }
.font-x-small { font-size:x-small; }
.font-small { font-size:small; }
.font-smaller { font-size:smaller; }
.font-larger { font-size:larger; }
.font-large { font-size:large; }
.font-x-large { font-size:x-large; }
.font-xx-large { font-size:xx-large; }

.normal { font-weight:normal; }
.bold { font-weight:bold; }

.underline{ text-decoration:underline; }





.red1{ color: #f00; }
.red2{ color: #b03; }

.orange1{ color: #f60; }
.orange2{ color: #f93; }


.pink1{ color: #f0f; }
.pink2{ color: #f3f; }
.pink3{ color: #f6f; }
.pink4{ color: #f9f; }
.pink5{ color: #fcf; }

.purple1{ color: #90f; }
.purple2{ color: #93f; }
.purple3{ color: #96f; }


.yellow1{ color: #ff0; }


.blue1{ color: #00f; }
.blue2{ color: #36f; }
.blue3{ color: #0ff; }

.navy1{ color: #006; }


.green1{ color: #090; }
.green2{ color: #0c0; }
.green3{ color: #0f0; }
.green4{ color: #0b8; }

.gray1{ color: #333; }
.gray2{ color: #666; }
.gray3{ color: #999; }
.gray4{ color: #ccc; }

.white1{ color: #fff; }
.black1{ color: #000; }


.pad5{ padding:0px 5px; }
.pad10{ padding:0px 10px; }
.pad20{ padding:0px 20px; }
.pad25{ padding:0px 25px; }
.pad30{ padding:0px 30px; }
.pad40{ padding:0px 40px; }
.pad50{ padding:0px 50px; }
.pad60{ padding:0px 60px; }
.pad70{ padding:0px 70px; }
.pad80{ padding:0px 80px; }
.pad90{ padding:0px 90px; }
.pad100{ padding:0px 100px; }
.pad120{ padding:0px 120px; }
.pad150{ padding:0px 150px; }

.margin10 { margin-left:10px; }
.margin20 { margin-left:20px; }
.margin25 { margin-left:25px; }
.margin30 { margin-left:30px; }
.margin40 { margin-left:40px; }
.margin50 { margin-left:50px; }
.margin100 { margin-left:100px; }
.margin200 { margin-left:200px; }
.margin240 { margin-left:240px; }
.margin260 { margin-left:260px; }
.margin300 { margin-left:300px; }




/* 【PC版】（768px＝iPad超の場合）非表示にする  */
@media (min-width: 768px) {
.spNone { display: none;}
}


.openclose { ; } /* トグルボタンの命令用で内容無のクラス */



/* レスポンシブ改行クラス 横幅が768pxより大きな場合は「クラスbr-pcが有効」になり、横幅が768px以下の場合では「クラスbr-spが有効」になる*/

@media screen and (min-width: 768px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 768px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}