@charset "shift_jis";
/* CSS Document */



/* 特長　説明左右
---------------------------------------- */


.FR-wrap {
    /*border: 1px solid #ddd;*/
    border-radius: 0 0 5px 5px;
    padding: 50px;
    margin-bottom: 30px;
    background-color: #f4f4f4;
}

.FR-wrap{
 background-color:#f2fafc!important;
}

.FRarea .FRbox {
  display: flex;
}

.FRarea .FRbox .img {
  flex-shrink: 0;
}

.FRarea .FRbox:nth-child(even) {
  flex-direction: row-reverse;
}

.FRarea .FRbox:nth-child(odd) .desc {
  padding-left: 20px;
}

.FRarea .FRbox:nth-child(even) .desc {
  padding-right: 20px;
}

.FRarea .FRbox .desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.FRbox .FRttl {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 0.5em;
}

.FRbox .txt{
 font-size:1.3em;
 line-height:1.5em;
}


/*　FRボタン　*/
.FRbox .FRbtn {
    margin-top: 12px;
}

.FRbtn a, .btn span {
    background: #f9d0b7;
    border: 2px solid #f9d0b7;
    border-radius: 20px;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 20px;
}

a {
    color: inherit;
    text-decoration: none;
}

.FRbox .FRbtn {
    margin-top: 12px;
}


.alignC {
    text-align: center;
}



/* スマートフォン向けレイアウト */
@media screen and (max-width: 578px){
.FRarea .FRbox {
  display: block;
  }

.FR-wrap {
    padding: 20px;
  }

.FRarea .FRbox:nth-child(odd) .desc {
  padding-left: 0px;
  }

.FRarea .FRbox:nth-child(even) .desc {
  padding-right: 0px;
  }

.FRbox .FRttl {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
  }

.FRbox .txt{
 font-size:1.2em;
}

}


/* ドットライン */
.dotted-line {
  border: 3px dotted #bbb;
}




/*　アプリ　*/
.frameGreen {
    background: #b0d704;
    padding: 14px 26px 50px;
    margin: 10px 0;
}

.apparea {
    position: relative;
    max-width:1210px;
}

.leftBox{
    width:40%;
}

.rightBox{
    width:57%;
    padding:0 15px;
}

/* スマートフォン向けレイアウト */
@media (max-width: 578px) {
.frameGreen {
    padding: 14px 10px 50px;
    margin: auto;
}

  .apparea {
    width: 92%;
  }
  .leftBox {
    width: 95%;
  }
  .rightBox {
    width: 95%;
  }
.titleGray01 {
    font-size: 15px;
  }
}








/* 撮影方法
---------------------------------------- */

.grid01 {
  max-width:1000px;
  margin: 0 auto;
  display: grid;
  grid-gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.item01 {
  border-radius: 10px;
  background: #a4c8e1;
  /*border:1px solid #dcdcdc;*/
  padding: 30px;
  text-align: center;
}

.cimg01 {
  max-width: 100%;
  height: auto;
}

.catch01{
  padding: 20px 0 10px 0;
  font-size: 170%;
  text-align: center;
  color:white;
  font-weight:bold;
}


@media screen and (max-width: 578px) {
.grid01 {
  margin: 0 50px;
  }
  .item01 {
  padding: 20px;
  }
  .catch01{
  font-size: 150%;
  padding: 0;
  }
}


/* 現像方法
---------------------------------------- */

.grid02 {
  max-width:1000px;
  margin: 0 auto;
  display: grid;
  grid-gap: 24px;
  /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
grid-template-columns: 1fr 1fr 1fr;
}

.item02 {
  border-radius: 10px;
  background: #d9ed83;
  /*border:1px solid #dcdcdc;*/
  padding: 30px;
  text-align: center;
}

.cimg02 {
  max-width: 100%;
  height: auto;
}

.catch02{
  padding: 20px 0 10px 0;
  font-size: 120%;
  text-align: center;
  color:#121212;
  font-weight:bold;
  line-height:1.5;
}

.p_app_small {
    display: block;
    padding-left: min(calc(var(--vpw) * 62px / var(--pcdw)), 62px);
    padding-top: min(calc(var(--vpw) * 17px / var(--pcdw)), 17px);
    font-size: min(calc(var(--vpw) * 16px / var(--pcdw)), 16px);
    font-weight: 400;
    margin-bottom: min(calc(var(--vpw) * 8px / var(--pcdw)), 8px);
}


@media screen and (max-width: 578px) {
.grid02 {
  grid-template-columns: 1fr;
  margin: 0 20px;
  }
.item02 {
  display: flex;
  padding: 20px;
  align-items: center;
  }
.cimg02{
  max-width:130px;
  }
.catch02{
  font-size: 100%;
  padding: 0;
  text-align: left;
  }
.p_app_small {
  margin-bottom:1em;
  margin-top:-1em;
  }

}


/*　ボタン1　*/

.btn1 {
  display: inline-block;
  cursor: pointer;
  padding: 20px 60px;
  color: #00ab4e;
  border-color: #fff;
  background-color: #fff;
  box-shadow: 0px 2px #003F3F;
  border-radius: 30px;
  font-size: 140%;
  font-weight:bold;
}

.btn1:active {
  position: relative;
  top: 5px;
  box-shadow: none;
}

.btn1:hover {
  opacity: 0.7 ;
  text-decoration: none;
}


.btn1 a:link {
    text-decoration: none;
}

.btn1 a:visited {
  color: #00ab4e;
}


.disabled{
  background-color: gray;
  pointer-events: none;
  box-shadow: 0px 5px #808080;
}

/* ボタン1 スマートフォン向けレイアウト */
@media (max-width: 578px) {
  .btn1 {
  padding: 12px 20px;
  }
.btn1 a, .btn1 a:link, .btn1 a:visited{
  color: #00ab4e;
  }
}


@media screen and (max-width: 767px){
.br-pc {display: none; }
}





/* 利用シーン
---------------------------------------- */

.LFcarousel_label {
  padding: 20px 0 30px 0;
  font-size: 1.3em;
  text-align: center;
}

.LFcarousel_title{
    padding: 0 0 20px 0;
    font-size: 1.3em;
    line-height: 1.5em;
}

/* コンテナ：横スクロール＋スナップ ON */
.LFcarousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}


/* カード：中央にスナップ */
.LFcarousel_item {
    flex: 0 0 450px;
    scroll-snap-align: center;
}

/* スマートフォン向けレイアウト */
@media screen and (max-width: 578px) {
.LFcarousel_item {
    flex: 0 0 250px;
 }
.LFcarousel_label{
 font-size:1.2em;
 }
.LFcarousel_title{
 font-size:1.2em;
 }
}



/* 作例 2×2
---------------------------------------- */

.grid03 {
  max-width:1000px;
  margin: 0 auto;
  display: grid;
  grid-gap: 20px;
  /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
grid-template-columns: 1fr 1fr;
}

.item03 {
  border-radius: 10px;
  background: #fff;
  /*border:1px solid #dcdcdc;*/
  padding: 10px;
  text-align: center;
}

.cimg03 {
  max-width: 100%;
  height: auto;
}


@media screen and (max-width: 578px) {
.grid03 {
  grid-template-columns: 1fr 1fr;
  margin: 0 5px;
  grid-gap: 10px;
  }
.item03 {
  display: flex;
  padding: 10px;
  align-items: center;
  }
}





/* FAQ全体
---------------------------------------- */

.qaAcd *, .qaAcd *:after, .qaAcd *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.qaAcd {
	border-top: 1px solid #aaa;
    margin: 50px auto;
    max-width: 1100px;
}
.qaAcd .qaActab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin-bottom: 1px;
	color: #1b2538;
}
.qaAcd .qaActab input {
	position: absolute;
	opacity: 0;
}
/* 質問 */
.qaAcd .qaActab label {
	font-weight: bold;
	line-height: 1.6;
	position: relative;
	display: block;
	margin: 0 0 0 0;
	padding: 1em 2.5em 1em 3em;
	cursor: pointer;
	border-bottom: 1px solid #aaa;
	font-size: 1.1em;
}
.qaAcd .qaActab label:hover {
	color: #009f80;
}

.qaAcd .qaActab label::before{
	content:"Q";
	display: block;
	position: absolute;
	color: #009f80;
	font-size: 1.3em;
	margin-right: 0.3em;
	left:1em;
	top:0.5em;
}


/* 答え */
.qaAcd .qaActab .qaActabContent {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.5s ease;
	        transition: max-height 0.5s ease;
	color: #000000;
	background: #F0F0E8;
}


.qaAcd .qaActab .qaActabContent p {
	margin: 1em 1em 0.2em 1em;
	font-size: 1.1em;
	padding-left:2em;
}

.qaAcd .qaActab .qaActabContent p.answer {
	margin: 1em;
	font-size: 1.1em;
	padding-left:2em;
}

.qaAcd .qaActab .qaActabContent ul {
	margin: 0em 1em 1em 1em;
	font-size: 1.1em;
	padding-left:2em;
}

.qaAcd .qaActab .qaActabContent p.answer::before{
	content:"A";
	display: block;
	position: absolute;
	color: #ee682d;
	font-size: 1.3em;
	margin-right: 0.3em;
	left:1em;
}

/* 質問を開いた時の仕様 */
/* --アイコン */
.qaAcd .qaActab input:checked ~ label {
	color: #009f80;
}
/* --答えの高さ */
.qaAcd .qaActab input:checked ~ .qaActabContent {
	max-height: 40em;
}
/* 質問をクリックした時のアイコンの動き */
.qaAcd .qaActab label::after {
	line-height: 1.6;
	position: absolute;
	top: 50%;
	right: 0;
	display: block;
	width: 3em;
	margin-top: -12.5px;
	-webkit-transition: all 0.5s ease;
	        transition: all 0.5s ease;
	text-align: center;
}
.qaAcd .qaActab input[type=checkbox] + label::after {
	content: '\25BC';
}
.qaAcd .qaActab input[type=checkbox]:checked + label::after {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}





/*既存のCSS*/

.mt05px{
 margin-top:5px;
}

.mt10px{
 margin-top:10px;
}

.mt50px{
 margin-top:50px;
}

.mt80px{
 margin-top:80px;
}

.mb05px{
 margin-bottom:5px;
}

.mb10px{
 margin-bottom:10px;
}

.mb20px{
 margin-bottom:20px;
}

.mb30px{
 margin-bottom:30px;
}

.alignC {
    text-align: center;
}

.bold01 {
    font-weight: bold;
}

.accent{
    color:#fe0000;
}