@charset "UTF-8";

/* instafeed */
.instafeed{width: 70%;margin: 0 auto;margin-bottom: 100px;}
.instafeed h2{font-size: 3vw; text-align: center; margin-bottom: 50px;}
.insta_list{ display: flex; flex-wrap: wrap; gap: 20px; margin: 20px 0;}
.insta_list li{ position: relative; width: calc((100% - 40px)/3);}
@media screen and (max-width: 750px){.insta_list li{ width: calc((100% - 20px)/2);}}
.insta_list li::before{ content: ""; display: block; padding-top: 100%;}
.insta_list a{  position: absolute; top: 0; width: 100%; height: 100%;}
.insta_list img{ width: 100%; height: 100%; object-fit: cover;}
.insta_btn{ background-color: #000; padding: .5em 1em; width: fit-content; margin: 0 auto; cursor: pointer; transition: .3s}
.insta_btn a{ color: #fff; text-decoration: none;}
.insta_btn:hover{ background-color: #999;}
/* PC */
@media ( min-width : 961px) {

.br-tablet {display: none; }
.br-mobile {display: none; }
.pc-no{display: none;}
/* fv */

.bg-slider {
	background-position:center center;
	background-size: cover;
	align-items: center;
	justify-content: center;
}

.container-fv{
  box-sizing: border-box;
  height: calc(90vh - 60px);
  background-size: cover;
  background-position: center;
  padding-top: 22vh;
}

.container-fv-tit{
  font-size: 60px;
  line-height: 1;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.63);
}

.container-fv-tit span{
  font-size: 40px;
  line-height: 1.5;
  display: block;
  margin-bottom: 11px;
}

.container-fv-btn a{
  margin: 8vh auto 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 350px;
  height: 70px;
  /* UI Properties */
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  position: relative;
  font-size: 23px;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
}

.container-fv-btn a img{
  position: absolute;
  margin-right: -8%;
  width: 10px;
  right: 40px;
}

/* introduction */

h3{
  margin: 0 auto ;
  text-align: center;
  font-size: 40px;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.63);
  padding-top:4%;
  padding-bottom: 6%;
}

.container-introduction{
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.7), rgba(30, 138, 118,0.7));
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  padding-bottom: 100px;
}

.container-introduction-list{
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
  color: #333;
  padding-bottom: 6%;
  line-height: 1.2;
}

.container-introduction-list-item{
  width: 100%;
  margin-right: 5%;
}

.container-introduction-list-item:first-of-type{
  width: 100%;
  margin-left: 10%;
}

.container-introduction-list-item:last-of-type{
  width: 100%;
  margin-right: 10%;
}





/* portfoliolink */
#index > main > section.portfoliolink > a{display: inline-block;}
.portfoliolink{
  font-size: 28px;
  line-height: 0.2;
  letter-spacing: 0.3em;
  text-align: center;
  color: #333;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.63);
  margin-bottom: 140px;
}

.portfoliolink img{
  display: block;
  width: 40%;
  margin:150px auto 50px auto;
}

.form-btn3{
  width: 20%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  border-radius: 5px;
  font-weight: bold;
  font-size: 20px;
  letter-spacing:0.1em;
  margin: 70px auto;
  position: relative;
  line-height: 1.6;
}

/* sns */

.container-sns-list{
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
  color: #333;
  margin-bottom: 150px;
  padding-top: 40px;
}

.container-sns-list-item{
  width: 100px;
  margin-right: 5%;
}

.container-sns-list-item:first-of-type{
  margin-left: 10%;
}

.container-sns-list-item:last-of-type{
  margin-right: 10%;
}

/* explanation */

h4{
  font-size: 26px;
  text-align: center;
  color: #333333;
  background:linear-gradient(to left, rgba(255, 255, 255, 0) 33%,rgba(64, 224, 208,0.5) 50%,rgba(255, 255, 255, 0) 66%);
  margin: 5% auto;
}

h4 span {
  margin-left:16px;
  font-size:60%;
  color: #ccc;
  position: relative;
  top: -5px;
}

h4 img{
  width: 65px;
  vertical-align: middle;
  margin-right: 5px;
}

h5 {
  padding: 0.3rem 0.7rem;
  border-left: 4px solid #3cf;
}

.container-explanation-section{
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.container-explanation-section:nth-of-type(2){
  margin-top: 8%;
  flex-direction: row-reverse;/* 要素の右と左を入れ替える */
}

.container-explanation-section-pic{
  width: 380px;
}

.container-explanation-section-box{
  width: 400px;
  padding: 0 3%;
}

.container-explanation-section-box-tit{
  font-size: 20px;
  color: #333333;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.container-explanation-section-box-txt{
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: 30px;
  color: #4D4D4F;
}

.container-explanation-section-box-btn{
  margin-top: 6%;
  text-align: center;
  font-size: 20px;
  margin-bottom: 30%;
}

.container-explanation-section-box a{/* ボタンの文字の設定 */
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  border-radius: 50px;
  font-weight: bold;
  letter-spacing:0.1em;
}



.container-explanation-section-box-txt{
  background: #cbf5ff url(http://www.webcreatorbox.com/sample/images/quote_open.gif) no-repeat 10px 10px;
  padding: 20px;
  text-indent: 15px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}
.container-explanation-section-box-txt span{
  background: url(http://www.webcreatorbox.com/sample/images/quote_close.gif) no-repeat bottom right;
  display: block;
}

/* anser */

.container-anser-section{
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.container-anser-section:nth-of-type(2){
  margin-top: 8%;
  flex-direction: row-reverse;/* 要素の右と左を入れ替える */
}

.container-anser-section-pic{
  width: 380px;
}

.container-anser-section-box{
  width: 400px;
  padding: 0 3%;
}

.container-anser-section-box-tit{
  font-size: 20px;
  color: #333333;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.container-anser-section-box-txt{
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: 30px;
  color: #4D4D4F;
}

.container-anser-section-box-txt{
  background: #cbf5ff url(http://www.webcreatorbox.com/sample/images/quote_open.gif) no-repeat 10px 10px;
  padding: 20px;
  text-indent: 15px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}
.container-anser-section-box-txt span{
  background: url(http://www.webcreatorbox.com/sample/images/quote_close.gif) no-repeat bottom right;
  display: block;
}

.container-anser-section-box-btn{
  margin-top: 6%;
  text-align: center;
  font-size: 20px;
  margin-bottom: 30%;
}
.container-anser-section-box a{/* ボタンの文字の設定 */
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  border-radius: 50px;
  font-weight: bold;
  letter-spacing:0.1em;
}

/* foam */

.container-foam-section{
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.container-foam-section-pic{
  width: 380px;
}

.container-foam-section-box{
  width: 800px;
  padding: 0 3%;
}

.container-foam-section-box-txt{
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: 20px;
  color: #4D4D4F;
}

.container-foam-section-box-txt{
  background: #cbf5ff url(http://www.webcreatorbox.com/sample/images/quote_open.gif) no-repeat 10px 10px;
  padding: 20px;
  text-indent: 15px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}
.container-foam-section-box-txt span{
  background: url(http://www.webcreatorbox.com/sample/images/quote_close.gif) no-repeat bottom right;
  display: block;
}

.form-btn-btn{
  margin-top: 6%;
  text-align: center;
  font-size: 20px;
  margin-bottom: 30%;
}
.form-btn a{/* ボタンの文字の設定 */
  width: 50%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  border-radius: 50px;
  font-weight: bold;
  letter-spacing:0.1em;
  margin: 70px auto;
}
.form-btn2{
  width: 50%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  border-radius: 50px;
  font-weight: bold;
  letter-spacing:0.1em;
  margin: 70px auto;
  position: relative;
}
.form-btn2 a img{
  position: absolute;
  margin-right: -8%;
  width: 10px;
  right: 40px;
  }
}


















/* tablet */
@media (max-width : 960px) {
@media (min-width : 521px){
  .br-mobile {display: none; }
  .br-pc {display: none; }
  .tb-no{display: none;}

  /* instafeed */
.instafeed h2{font-size: 4vw; text-align: center; margin-bottom: 50px;}
/* fv */
.wordpress-fv{
  background-image: url("https://ups-school.com/img/green.jpg");
  box-sizing: border-box;
  height: calc(100vh - 60px);
  background-size: cover;
  background-position: center;
  padding-top: 14.3125%;
}
.wordpress-fv-tit{
  margin-top: 14%;
  font-size: 70px;
  line-height: 1;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.63);
}

.wordpress-fv-tit span{
  font-size: 40px;
  line-height: 1.5;
  display: block;
  margin-bottom: 8px;
}

.bg-slider {
	background-position:center center;
	background-size: cover;
	align-items: center;
	justify-content: center;
}

.container-fv{
  box-sizing: border-box;
  height: calc(85vh - 60px);
  background-size: cover;
  background-position: center;
  padding-top: 22vh;
}

.container-fv-tit{
  font-size: 70px;
  line-height: 1;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.63);
}

.container-fv-tit span{
  font-size: 40px;
  line-height: 1.5;
  display: block;
  margin-bottom: 8px;
}

.container-fv-btn a{
  margin: 8vh auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 350px;
  height: 70px;
  /* UI Properties */
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  position: relative;
  font-size: 23px;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
}

.container-fv-btn a img{
  position: absolute;
  margin-right: -8%;
  width: 10px;
  right: 40px;
}

/* introduction */

h3{
  margin: 0 auto ;
  text-align: center;
  font-size: 40px;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.63);
  padding-top:8%;
  padding-bottom: 16%;
}

.container-introduction{
  
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.7), rgba(30, 138, 118,0.7));
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  padding-bottom: 100px;
}

.container-introduction-list{
margin: 0 auto;
  color: #333;
  -webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
width: 90%;
}

.container-introduction-list-item{
  width: 90%;
  margin: 0 0 60px 5%;
  line-height: 1.2;
  text-align: center;
}





/* portfoliolink */
#index > main > section.portfoliolink > a{display: inline-block;}
.portfoliolink{
  font-size: 28px;
  line-height: 0.2;
  letter-spacing: 0.3em;
  text-align: center;
  color: #333;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.63);
  margin-bottom: 140px;
}

.portfoliolink img{
  display: block;
  width: 40%;
  margin:150px auto 50px auto;
}

.form-btn3{
  width: 40%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  border-radius: 5px;
  font-weight: bold;
  font-size: 20px;
  letter-spacing:0.1em;
  margin: 70px auto;
  position: relative;
  line-height: 1.6;
}

/* sns */

.container-sns-list{
  margin: 10% 0 20% 0;
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
  color: #333;
}

.container-sns-list-item{
  width: 100px;
  margin-right: 6%;
}

.container-sns-list-item:first-of-type{
  margin-left: 10%;
}

.container-sns-list-item:last-of-type{
  margin-right: 10%;
}

/* explanation */

h4{
  font-size: 26px;
  text-align: center;
  color: #333333;
  background:linear-gradient(to left, rgba(255, 255, 255, 0) 10%,rgba(64, 224, 208,0.5) 50%,rgba(255, 255, 255, 0) 90%);
  margin: 10% auto;
}

h4 span {
  margin-left:16px;
  font-size:60%;
  color: #ccc;
  position: relative;
  top: -5px;
}

h4 img{
  width: 65px;
  vertical-align: middle;
  margin-right: 5px;
}

h5 {
  padding: 0.3rem 0.7rem;
  border-left: 4px solid #3cf;
}

.container-explanation-section{
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.container-explanation-section:nth-of-type(2){
  margin-top: 8%;
  flex-direction: row-reverse;/* 要素の右と左を入れ替える */
}

.container-explanation-section-pic{
  width: 50%;
}

.container-explanation-section-box{
  width: 400px;
  padding: 0 3%;
}

.container-explanation-section-box-tit{
  font-size: 20px;
  color: #333333;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.container-explanation-section-box-txt{
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: 30px;
  color: #4D4D4F;
}

.container-explanation-section-box-btn{
  margin-top: 6%;
  text-align: center;
  font-size: 20px;
  margin-bottom: 30%;
}

.container-explanation-section-box a{/* ボタンの文字の設定 */
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  border-radius: 50px;
  font-weight: bold;
  letter-spacing:0.1em;
}



.container-explanation-section-box-txt{
  background: #cbf5ff url(http://www.webcreatorbox.com/sample/images/quote_open.gif) no-repeat 10px 10px;
  padding: 20px;
  text-indent: 15px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}
.container-explanation-section-box-txt span{
  background: url(http://www.webcreatorbox.com/sample/images/quote_close.gif) no-repeat bottom right;
  display: block;
}

/* anser */

.container-anser-section{
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.container-anser-section:nth-of-type(2){
  margin-top: 8%;
  flex-direction: row-reverse;/* 要素の右と左を入れ替える */
}

.container-anser-section-pic{
  width: 50%;
}

.container-anser-section-box{
  width: 400px;
  padding: 0 3%;
}

.container-anser-section-box-tit{
  font-size: 20px;
  color: #333333;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.container-anser-section-box-txt{
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: 30px;
  color: #4D4D4F;
}

.container-anser-section-box-txt{
  background: #cbf5ff url(http://www.webcreatorbox.com/sample/images/quote_open.gif) no-repeat 10px 10px;
  padding: 20px;
  text-indent: 15px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}
.container-anser-section-box-txt span{
  background: url(http://www.webcreatorbox.com/sample/images/quote_close.gif) no-repeat bottom right;
  display: block;
}

.container-anser-section-box-btn{
  margin-top: 6%;
  text-align: center;
  font-size: 20px;
  margin-bottom: 30%;
}
.container-anser-section-box a{/* ボタンの文字の設定 */
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  border-radius: 50px;
  font-weight: bold;
  letter-spacing:0.1em;
}

/* foam */

.container-foam-section{
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.container-foam-section:nth-of-type(2){
  margin-top: 8%;
  flex-direction: row-reverse;/* 要素の右と左を入れ替える */
}

.container-foam-section-pic{
  width: 380px;
}

.container-foam-section-box{
  width: 400px;
  padding: 0 3%;
}

.container-foam-section-box-txt{
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: 30px;
  color: #4D4D4F;
}

.container-foam-section-box-txt{
  background: #cbf5ff url(http://www.webcreatorbox.com/sample/images/quote_open.gif) no-repeat 10px 10px;
  padding: 20px;
  text-indent: 15px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}
.container-foam-section-box-txt span{
  background: url(http://www.webcreatorbox.com/sample/images/quote_close.gif) no-repeat bottom right;
  display: block;
}

.form-btn-btn{
  margin-top: 6%;
  text-align: center;
  font-size: 20px;
  margin-bottom: 30%;
}
.form-btn a{/* ボタンの文字の設定 */
  width: 80%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  border-radius: 50px;
  font-weight: bold;
  letter-spacing:0.1em;
  margin: 70px auto;
}
.form-btn2{
  width: 80%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  border-radius: 50px;
  font-weight: bold;
  letter-spacing:0.1em;
  margin: 70px auto;
  position: relative;
}
.form-btn2 a img{
  position: absolute;
  margin-right: -8%;
  width: 10px;
  right: 40px;
  }

}
}











/* mobile */
@media (max-width : 520px){
  .br-tablet{display: none;}
  .br-pc {display: none; }
  .sp-no{display: none;}

    /* instafeed */
.instafeed h2{font-size: 7vw; text-align: center; margin-bottom: 50px;}

/* fv */
.wordpress-fv{
  background-image: url("https://ups-school.com/img/green.jpg");
  box-sizing: border-box;
  height: calc(100vh - 60px);
  background-size: cover;
  background-position: center;
  padding-top: 14.3125%;
}
.wordpress-fv-tit{
  margin-top: 12%;
  font-size: 60px;
  line-height: 1;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.63);
}

.wordpress-fv-tit span{
  font-size: 30px;
  line-height: 1.5;
  display: block;
  margin-bottom: 8px;
}

.bg-slider {
	background-position:center center;
	background-size: cover;
	align-items: center;
	justify-content: center;
}

.container-fv{
  box-sizing: border-box;
  height: calc(75vh - 60px);
  background-size: cover;
  background-position: center;
  padding-top: 9vh;
}

.container-fv-tit{
  font-size: 60px;
  line-height: 1;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.63);
}

.container-fv-tit span{
  font-size: 30px;
  line-height: 1.5;
  display: block;
  margin-bottom: 8px;
}

.container-fv-btn a{
  margin: 7vh auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 60px;
  /* UI Properties */
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  position: relative;
  font-size: 99%;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
}

.container-fv-btn a img{
  position: absolute;
  margin-right: -8%;
  width: 9px;
  right: 40px;
}

/* introduction */

h3{
  margin: 0 auto ;
  text-align: center;
  font-size: 30px;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.63);
  padding-top:10%;
  padding-bottom: 6%;
}

.container-introduction{
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.7), rgba(30, 138, 118,0.7));
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  padding-bottom: 100px;
}

.container-introduction-list{
  box-sizing: border-box;
  color: #333;
  -webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
  width: 95%;
  margin: 0 auto;
}

.container-introduction-list-item{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  list-style: none;
  text-align: center;
  line-height: 1.2;
  padding : 10% 20% ;
  width: 100%;
}


/* portfoliolink */
#index > main > section.portfoliolink > a{display: inline-block;}
.portfoliolink{
  font-size: 24px;
  line-height: 0.2;
  letter-spacing: 0.3em;
  text-align: center;
  color: #333;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.63);
  margin-bottom: 140px;
}

.portfoliolink img{
  display: block;
  width: 80%;
  margin:150px auto 50px auto;
}

.form-btn3{
  width: 70%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  border-radius: 5px;
  font-weight: bold;
  font-size: 20px;
  letter-spacing:0.1em;
  margin: 70px auto;
  position: relative;
  line-height: 1.6;
}

.portfokio-txt{line-height: 1.2;}

/* sns */

.container-sns-list{
  margin: 20% 0;
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
  color: #333;
  font-size: 12px;
}

.container-sns-list-item{
  width: 70px;
  margin-right: 12%;
}

.container-sns-list-item:first-of-type{
  margin-left: 10%;
}

.container-sns-list-item:last-of-type{
  margin-right: 10%;
}

/* explanation */

h4{
  display: flex;
  font-size: 16px;
  color: #333333;
  background:linear-gradient(to left, rgba(255, 255, 255, 0) 0%,rgba(64, 224, 208,0.5) 50%,rgba(64, 224, 208,0.5) 100%);
  margin: 5% auto;
  padding: 5px 0;
}

h4 span {
  margin-left:1px;
  font-size:60%;
  color: #ccc;
  position: relative;
  top: 25px;
}

h4 img{
  width: 40px;
  vertical-align: middle;
  margin-right: 5px;
}

h5 {
  padding: 0.3rem 0.7rem;
  border-left: 4px solid #3cf;
}

.container-explanation-section{
  margin-top: 60px;
  margin-bottom: 5%;
}

.container-explanation-section:nth-of-type(2){
  margin-top: 8%;
  flex-direction: row-reverse;/* 要素の右と左を入れ替える */
}

.container-explanation-section-pic{
  margin: 0 auto;
  width: 90%;
}

.container-explanation-section-box{
  margin: 0 auto;
  width: 90%;
  padding: 0 3%;
}

.container-explanation-section-box-tit{
  font-size: 20px;
  color: #333333;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.container-explanation-section-box-txt{
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: 30px;
  color: #4D4D4F;
}

.container-explanation-section-box-btn{
  margin-top: 6%;
  text-align: center;
  font-size: 20px;
  margin-bottom: 30%;
}

.container-explanation-section-box a{/* ボタンの文字の設定 */
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  border-radius: 50px;
  font-weight: bold;
  letter-spacing:0.1em;
}



.container-explanation-section-box-txt{
  background: #cbf5ff url(http://www.webcreatorbox.com/sample/images/quote_open.gif) no-repeat 10px 10px;
  padding: 20px;
  text-indent: 15px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}
.container-explanation-section-box-txt span{
  background: url(http://www.webcreatorbox.com/sample/images/quote_close.gif) no-repeat bottom right;
  display: block;
}

/* anser */

.container-anser-section{
  justify-content: center;
  margin-top: 60px;
}

.container-anser-section:nth-of-type(2){
  margin-top: 8%;
  flex-direction: row-reverse;/* 要素の右と左を入れ替える */
}

.container-anser-section-pic{
  margin: 0 auto;
  width: 90%;
}

.container-anser-section-box{
  margin: 0 auto;
  width: 90%;
  padding: 0 3%;
}

.container-anser-section-box-tit{
  font-size: 20px;
  color: #333333;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.container-anser-section-box-txt{
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: 30px;
  color: #4D4D4F;
}

.container-anser-section-box-txt{
  background: #cbf5ff url(http://www.webcreatorbox.com/sample/images/quote_open.gif) no-repeat 10px 10px;
  padding: 20px;
  text-indent: 15px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}
.container-anser-section-box-txt span{
  background: url(http://www.webcreatorbox.com/sample/images/quote_close.gif) no-repeat bottom right;
  display: block;
}

.container-anser-section-box-btn{
  margin-top: 6%;
  text-align: center;
  font-size: 20px;
  margin-bottom: 30%;
}
.container-anser-section-box a{/* ボタンの文字の設定 */
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  border-radius: 50px;
  font-weight: bold;
  letter-spacing:0.1em;
}

/* foam */

.container-foam-tit{
  display: flex;
  font-size: 16px;
  color: #333333;
  background:linear-gradient(to left, rgba(255, 255, 255, 0) 0%,rgba(64, 224, 208,0.5) 50%,rgba(64, 224, 208,0.5) 100%);
  padding: 5px 0;
  padding-left: 5px;
  align-items: center;
  justify-content: center;
}

.container-foam-tit span {
  margin-left:1px;
  font-size:70%;
  color: #ccc;
  position: relative;
  top: 10px;
}

.container-foam-section{
  justify-content: center;
  margin-top: 60px;
}

.container-foam-section-box{
  margin: 0 auto;
  width: 90%;
  padding: 0 3%;
}

.container-foam-section-box-txt{
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: 30px;
  color: #4D4D4F;
}

.container-foam-section-box-txt{
  background: #cbf5ff url(http://www.webcreatorbox.com/sample/images/quote_open.gif) no-repeat 10px 10px;
  padding: 20px;
  text-indent: 15px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}
.container-foam-section-box-txt span{
  background: url(http://www.webcreatorbox.com/sample/images/quote_close.gif) no-repeat bottom right;
  display: block;
}

.form-btn-btn{
  margin-top: 6%;
  text-align: center;
  font-size: 20px;
  margin-bottom: 30%;
}
.form-btn a{/* ボタンの文字の設定 */
  width: 90%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  border-radius: 50px;
  font-weight: bold;
  letter-spacing:0.1em;
  margin: 70px auto;
}
.form-btn2{
  width: 90%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  border-radius: 50px;
  font-weight: bold;
  letter-spacing:0.1em;
  margin: 70px auto;
  position: relative;
}
.form-btn2 a img{
  position: absolute;
  margin-right: -8%;
  width: 10px;
  right: 40px;
  }
}






@media ( min-width : 961px) {
  /* news-wordpress */
#index main .container-news-wordpress .post-list .post-item{margin-top: 10px;line-height: 1.8;display: flex;justify-content: start;padding-left: 2%;width: 100%;box-sizing: border-box;}
#index main .container-news-wordpress .post-list .post-item li{margin-right: 10px;}
#index main .container-news-wordpress .post-list .post-item a img{width: 100%;}
#index main .container-news-wordpress .post-list .post-item .post-header p{font-size: 14px;font-style: normal;}
#index main .container-news-wordpress .post-list .post-item .post-header .post-title{line-height: 1.8;}
div.container-news-wordpress > div.post-list > article > header > ul > li > a{display: none;}
#index > main > div.container-news-wordpress > div.post-list > article:nth-child(1) > header > ul{display: none;}
#index > main > div.container-news-wordpress > div.post-list > article > a{width: 26%;}
#index > main > div.container-news-wordpress > div.post-list > article > a > img{width: 100% !important;height: auto !important;}
#index > main > div.container-news-wordpress > div.post-list > article > header > time{color: #43acb5;}
.main-page-top-news-title{ font-size: 3vw; text-align: center; margin-top: 50px;}
.main-page-new-blog-title{ font-size: 2.5vw; text-align: center; margin-bottom: 50px;}
.img-01{width: 150px;}
.wp-title-icon{width: 36px;margin: 0 20px -4px 0;}
.wp-image-100{height: 100%;}
.wp-post-image{width: 100%;}

.container-news-wordpress{
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
  padding: 10px;
  margin: 70px auto 20px;
  background-color:#FFFDF5;
  border-radius: 10px;
  box-sizing: border-box;
  width: 70%;
  height: 460px;
  line-height: 1.8;
  font-style: normal;
  font-size: 18px;
  overflow-y:scroll;
  overflow-x: hidden;
  }

.container-news-wordpress .post-list .post-item{
  display:flex;
  border-bottom:solid 1px #e4e3df;
}
.container-news-wordpress .post-list .post-item .post-header{
  box-sizing: border-box;
  width: 74%;
  margin-left:20px;
}
.container-news-wordpress li {margin-bottom: 20px;}
body main #main #wrper #mleft{margin-left: 10%; width: 60%;float: left;text-align: center;}
body main #main #wrper #mleft #box-01 .h2-01{font-size: 48px;margin-bottom: 50px;}
body main #main #wrper #mleft #box-01 .area-01 .wp-block-image{width: 50%;margin: 0 auto;}
body main #main #wrper #mleft #box-01 .area-01 .wp-block-image img{height: 100%;margin: 80px 0;}
}

@media (max-width : 960px) {
@media (min-width : 521px) {
/* news-wordpress */
.img-01{width: 150px;}
.wp-title-icon{width: 28px;margin: 80px 10px -2px 0;}
.wp-post-image{width: 100%;}
.wp-image-100{height: 100%;}
#index main .container-news-wordpress .post-list .post-item{margin-top: 10px;line-height: 1.8;box-sizing: border-box;width: 100%;}
#index main .container-news-wordpress .post-list .post-item a img{width: 120px;}
#index main .container-news-wordpress .post-list .post-item .post-header p{font-size: 14px;font-style: normal;}
#index main .container-news-wordpress .post-list .post-item .post-header .post-title{line-height: 1.8;}
div.container-news-wordpress > div.post-list > article > header > ul > li > a{display: none;}
#index > main > div.container-news-wordpress > div.post-list > article:nth-child(1) > header > ul{display: none;}
#index > main > div.container-news-wordpress > div.post-list > article > a > img{width: 100% !important;height: auto !important;}
.main-page-top-news-title{ font-size: 4vw; text-align: center; margin-top: 50px;}
.main-page-new-blog-title{ font-size: 3.5vw; text-align: center; margin-bottom: 50px;}
.container-news-wordpress{
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
  padding: 10px;
  margin: 70px auto 20px;
  background-color:#FFFDF5;
  border-radius: 10px;
  box-sizing: border-box;
  width: 80%;
  height: 350px;
  line-height: 1.8;
  font-style: normal;
  font-size: 16px;
  overflow-y:scroll;
  overflow-x: hidden;
  }

  .container-news-wordpress .post-list .post-item{
    display:flex;
    border-bottom:solid 1px #e4e3df;
  }
  .container-news-wordpress .post-list .post-item .post-header{
box-sizing: border-box;padding-left: 20px; width: 100%;
  }
  .container-news-wordpress li {margin-bottom: 20px;}
  body main #main #wrper #mleft{width: 100%;text-align: center;}
  body main #main #wrper #mleft #box-01 .h2-01{font-size: 36px;margin-bottom: 40px;}
  body main #main #wrper #mleft #box-01 .area-01 .wp-block-image{width: 50%;margin: 70px auto;}
  body main #main #wrper #mleft #box-01 .area-01 .wp-block-image img{height: 100%;margin: 80px 0;}
  #index > main > div.container-news-wordpress > div.post-list > article > a{width: 40%;}
  #index > main > div.container-news-wordpress > div.post-list > article > header > time{color: #43acb5;}
}}

@media (max-width : 520px) {
/* news-wordpress */

.img-01{width: 100px;}
.wp-title-icon{width: 30px;}
.wp-post-image{width: 100%;}
.wp-image-100{height: 100%;}
#index main .container-news-wordpress .post-list .post-item{margin-top: 10px;line-height: 1.8;box-sizing: border-box;width: 100%;}
#index main .container-news-wordpress .post-list .post-item a img{width: 100px;}
#index main .container-news-wordpress .post-list .post-item .post-header .post-title{line-height: 1.8;}
#index main .container-news-wordpress .post-list .post-item .post-header p{font-size: 14px;font-style: normal;}
div.container-news-wordpress > div.post-list > article > header > ul > li > a{display: none;}
#index > main > div.container-news-wordpress > div.post-list > article:nth-child(1) > header > ul{display: none;}
#index > main > div.container-news-wordpress > div.post-list > article > a{width: 35%;box-sizing: border-box;}
#index > main > div.container-news-wordpress > div.post-list > article > header{width: 65%;box-sizing: border-box;}
#index > main > div.container-news-wordpress > div.post-list > article > a > img{width: 100% !important;height: auto !important;}
#index > main > div.container-news-wordpress > div.post-list > article > header > time{color: #43acb5;}
.container-news-wordpress{
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
padding: 10px;
margin: 70px auto 20px;
background-color:#FFFDF5;
border-radius: 10px;
box-sizing: border-box;
width: 85%;
height: 300px;
line-height: 1.8;
font-style: normal;
font-size: 14px;
overflow-y:scroll;
overflow-x: hidden;
}
.container-news-wordpress .post-list .post-item{
  display:flex;
  border-bottom:solid 1px #e4e3df;
}
.container-news-wordpress .post-list .post-item .post-header{
box-sizing: border-box;padding-left: 20px;
}
.container-news-wordpress li {margin-bottom: 20px;}
body main #main #wrper #mleft{width: 100%;text-align: center;}
body main #main #wrper #mleft #box-01 .h2-01{font-size: 28px;margin-bottom: 30px;}
body main #main #wrper #mleft #box-01 .area-01 .wp-block-image{width: 50%;margin: 60px auto;}
body main #main #wrper #mleft #box-01 .area-01 .wp-block-image img{height: 100%;margin: 80px 0;}
.main-page-top-news-title{ font-size: 7vw; text-align: center; margin-top: 50px;}
.main-page-new-blog-title{ font-size: 6.5vw; text-align: center; margin-bottom: 50px;}
}























@media ( min-width : 961px) {
.page-title{color: #759E5C;}
.box-01{text-align: center;}
/*▼ブログ一覧　固定ページ▼*/
#blog #main{ padding:50px 0 0;}
#blog #main-blog { width:100%; margin:auto; overflow:hidden; margin-bottom:70px;}


#blog #mleft { width:680px; float:left;text-align: center;}
#blog #mleft .box{ width:680px;}

#blog #box-01{ padding-top:0px;}
#blog #box-01 .area-01{}
#blog #box-01 .area-01 .entry{ overflow:hidden; padding:50px 0; border-bottom:1px solid #a11f24;}
#blog #box-01 .area-01 .entry img{ float:left; width:200px; height:200px; object-fit: contain; margin-right:30px;}
#blog #box-01 .area-01 .entry .t-box{padding-top:10px; overflow:hidden;}
#blog #box-01 .area-01 .entry .t-box h2{ font-size:24px; font-weight:600; color:#a11f24; margin-bottom:25px;}
#blog #box-01 .area-01 .entry .t-box h2 a{color:#759E5C;}
#blog #box-01 .area-01 .entry .t-box p { line-height:1.8em;}


/*　右サイドカラム　*/
.mright-container{overflow: hidden;}
#mright{ width:50%; float:right; padding-bottom:50px;}
#mright .sbox{ margin-bottom:40px;}
#mright h2{ font-size:19px; font-weight:bold; letter-spacing:normal; padding-bottom:3px; position:relative; margin-bottom:10px;}
#mright h2 span{ font-size:13px; font-weight:500; color:#55abbb; display:inline-block; margin-left:10px;}
#mright h2:before{ box-sizing: inherit; display: block; height: 1px; position: absolute; content: ""; bottom:0; left:0; width: 40%; z-index: 1; background:#55abbb;}
#mright h2:after { content: ""; bottom: 0; left: 0; width: 100%; background:#ddd; box-sizing: inherit; display: block; height: 1px; position: absolute; z-index: 0;}


#mright #sbox-01{ border:1px solid #ddd; padding:4px;}
#mright #sbox-01 .bk-img{ width:100%; height:150px; object-fit:cover;}
#mright #sbox-01 .icon{ margin:-60px 0 10px; text-align:center;}
#mright #sbox-01 .icon img{ background: #fdfdfd; border: 4px solid #fdfdfd; border-radius: 50%; width: 120px; height: 120px; -o-object-fit: cover; object-fit: cover;}
#mright #sbox-01 .p-name{ text-align:center; letter-spacing:2px; margin-bottom:3px;}
#mright #sbox-01 .p-01{ font-size:12px; color:#999; text-align:center; letter-spacing:normal; margin-bottom:10px;}
#mright #sbox-01 .p-02{ font-size:14px; letter-spacing:normal; padding:0 10px 5px; text-align: justify}
#mright #sbox-01 .btn{ padding:10px 30px 20px;}
#mright #sbox-01 .btn a{ background:#55abbb; font-size:14px; color:#fff; letter-spacing:normal; text-decoration:none; display:block; text-align:center; padding:7px 0; border-radius:30px;}
#mright #sbox-01 .btn a:hover{ box-shadow: 0 4px 12px rgb(0 0 0 / 10%), 0 12px 24px -12px rgb(0 0 0 / 10%); opacity: 1;}

#mright #sbox-02{}
#mright #sbox-02 ul{}
#mright #sbox-02 ul li{ border-bottom:1px solid #ddd;}
#mright #sbox-02 ul li a{ background:url(../images2/blog/icon-f.png) left 10px top 14px no-repeat; font-size:15px; color:#555; background-size:16px auto; padding:10px 10px 10px 35px; letter-spacing:normal; text-decoration:none; display:block; transition: 0.2s;}
#mright #sbox-02 ul li a span{ transition: 0.2s;}
#mright #sbox-02 ul li a:hover{ background-color:#e9f8fb; opacity:1; transition: 0.2s;}
#mright #sbox-02 ul li a:hover span{ padding-left:3px; transition: 0.2s;}

#mright #sbox-03{}
#mright #sbox-03 ul{}
#mright #sbox-03 ul li{ overflow:hidden; margin-bottom:12px;}
#mright #sbox-03 ul li a{ padding:0px; text-decoration:none; display:block; transition: 0.2s;}
#mright #sbox-03 ul li .img{ width:90px; height:90px; float:left; overflow:hidden; border:1px solid #efefef; box-sizing:border-box;}
#mright #sbox-03 ul li img{ width:90px; height:90px; object-fit:cover; float:left;transition: 0.3s;}
#mright #sbox-03 ul li p{ width:170px; font-size:14px; font-weight:500; color:#555; letter-spacing:normal; display:inline-block; float:right; padding-top:2px;}
#mright #sbox-03 ul li a:hover{ opacity:0.9; transition: 0.2s;}
#mright #sbox-03 ul li a:hover img{ -webkit-transform: scale(1.04); transform: scale(1.04); transition: 0.3s;}


/* キーワードで探す */
#mright #sbox-05 .tag-area{ margin:auto; display: flex; flex-wrap: wrap;}
#mright #sbox-05 .tag-area a{ background:#f7f7f7; border-radius:30px; margin: 2px; flex: 1 1 auto; display: flex; justify-content: space-between;color:#333; display: block; text-decoration: none; font-size:12px; letter-spacing:normal; padding: 0.2rem 0.4rem 0.2rem 0.4rem; transition: background-color 0.5s;-webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;}
#mright #sbox-05 .tag-area a::before { content: '#'; color:#aaa; margin-right: 0.1rem;}
#mright #sbox-05 .tag-area a:hover { opacity:1; filter: alpha(opacity=50); background-color:#c5f0f8;}



/*▼クライアントの声　voice▼*/
#voice #main{ padding:30px 0 0;}

#voice #box-01{padding-top:0px;}
#voice #box-01 .area-01{}
#voice #box-01 .area-01 .entry{ overflow:hidden; padding:50px 0; border-bottom:1px solid #a11f24;}
#voice #box-01 .area-01 .entry img{ float:left; width:300px; height:300px; object-fit: cover;}
#voice #box-01 .area-01 .entry .t-box{ float:right; width:670px; padding-top:10px;}
#voice #box-01 .area-01 .entry .t-box h2{ font-size:24px; font-weight:600; color:#a11f24; margin-bottom:20px;}
#voice #box-01 .area-01 .entry .t-box h2 a{color:#a11f24;}
#voice #box-01 .area-01 .entry .t-box p { line-height:1.8em;}


/*▼お知らせ一覧▼*/
#news #main{ padding:30px 0 0;}

#news #box-01{padding-top:0px;}
#news #box-01 .area-01{}

#news #box-01 .area-01 dt{ font-weight:bold; background:url(../images2/common/ico-01.png) 0 4px no-repeat; padding-left:20px;}
#news #box-01 .area-01 dd{ border-bottom:#CCC solid 1px; padding-bottom:20px; margin-bottom:20px; padding-left:20px;}


/*▼▼▼▼▼▼▼ここからsingle詳細▼▼▼▼▼▼▼*/

#single #main{width: 100%; padding:50px 0 0;}
#single #wrper{ width:100%; overflow:hidden; overflow:hidden; margin:auto;}
#single #mleft{ width:680px; float:left;}
#single #mright{ width:270px; float:right;}
#single #box-01{ width:680px; padding-top:0;}
#single #box-01 img{ max-width:100%; height:auto;}
#single #box-01 .date{ text-align:right;}
#single #box-01 .listcatego{ display:inline-block; float:right;}
#single #box-01 .listcatego span{ float:left;}
#single #box-01 .listcatego ul{ overflow:hidden;}
#single #box-01 .listcatego ul li{ display:inline-block; margin-left:10px; margin-bottom:20px;}

/* タグの表示（記事最後） */
.tags-links { padding-top:0px; clear: both; padding-bottom:50px;}
.tags-links i{ position:relative; top:-12px; color:#55abbb; margin-right:5px;}
.tags-links ul { padding:0 0px;}
.tags-links ul li{ display:inline-block; font-size:12px;}
.tags-links a{ background:#f7f7f7; display:inline-block; text-decoration:none; color:#333; border-radius:7px; padding: 0.2rem 0.8rem 0.2rem 0.5rem; margin-right: 0.3rem; margin-bottom: 0.25rem; font-size:12px; letter-spacing:normal; border-radius:20px;}
.tags-links a::before { content: '#'; color:#ccc; margin-right: 0.1rem;}
.tags-links a:hover { opacity:1; filter: alpha(opacity=50); background-color:#c5f0f8; }
.tags-links a i { font-size:10px; margin-right:1px; -webkit-transition: 0; -moz-transition: 0; -ms-transition: 0s; transition: 0; color:#666;}





/*▼▼▼▼▼▼▼ここから個別ページ▼▼▼▼▼▼▼*/
#page #box-01{ padding-top:100px;}

/*▼▼▼▼▼▼▼ここからcatego詳細▼▼▼▼▼▼▼*/
#catego #box-01{ padding-top:0px;}
#catego #box-01 .area-01{ overflow:hidden;}
#catego #box-01 .area-01 a{ text-decoration:none;}
#catego #box-01 .area-01 .entry{margin-bottom:20px; width:241px;float:left;margin-right:20px;}
#catego #box-01 .area-01 a:nth-child(4n) .entry{ margin-right:0px;}
#catego #box-01 .area-01 .entry .photo{ width:241px; height:241px; overflow:hidden;background:#333; margin-bottom:5px;}
#catego #box-01 .area-01 .entry .photo img{width:241px;height:241px;object-fit: cover;}
#catego #box-01 .area-01 .entry .title{font-weight:bold;}
#catego #box-01 .area-01 .entry .title a{ color:#333;}


/*一覧ページのページネーション*/
.pagination { margin: 40px 0 0; text-align:center;}
.nav-links {}
.pagination .page-numbers { display:inline-block;margin-right:20px;padding:10px 15px;color:#333;border-radius:3px;box-shadow:1px 1px 5px #999;background:#fff;vertical-align:top;}
.pagination .current { padding: 10px 15px; background: #55ABBB; color: #fff; }
.pagination .prev,
.pagination .next { background: transparent; box-shadow: none; color: #55ABBB; }
.pagination .dots { background: transparent; box-shadow: none; }

/*固定ページのページネーション*/
#pagenation { margin: 40px 0 0; text-align:center;}
.nav-links {}
#pagenation .page-numbers { display:inline-block;margin-right:20px;padding:10px 15px;color:#333;border-radius:3px;box-shadow:1px 1px 5px #999;background:#fff;vertical-align:top;}
#pagenation .current { padding: 10px 15px; background: #55ABBB; color: #fff; }
#pagenation .prev,
#pagenation .next { background: transparent; box-shadow: none; color: #55ABBB; }
#pagenation .dots { background: transparent; box-shadow: none; }

/*詳細・個別ページのページネーション*/
.postNavi{ clear: both; margin-top:50px;}
.postNavi span { width: 240px; }
.postNavi span.prev { float: left; padding-left: 10px; background: url(../images2/bl/arr01_left.png) no-repeat left 0.5em; }
.postNavi span.next { float: right; padding-right: 10px; background: url(../images2/bl/arr01_right.png) no-repeat right 0.5em; text-align: right; }
}

@media (max-width : 960px) {
  @media (min-width : 521px){
#blog #main{ padding:50px 0 0;}
#blog #main-blog { width:100%; margin:auto; margin-bottom:70px;}


#blog #mleft { width:680px;text-align: center;}
#blog #mleft .box{ width:680px;}

#blog #box-01{ padding-top:0px;}
#blog #box-01 .area-01{}
#blog #box-01 .area-01 .entry{ padding:50px 0; border-bottom:1px solid #a11f24;}
#blog #box-01 .area-01 .entry img{ width:200px; height:200px; object-fit: contain; margin-right:30px;}
#blog #box-01 .area-01 .entry .t-box{padding-top:10px;}
#blog #box-01 .area-01 .entry .t-box h2{ font-size:24px; font-weight:600; color:#a11f24; margin-bottom:25px;}
#blog #box-01 .area-01 .entry .t-box h2 a{color:#759E5C;}
#blog #box-01 .area-01 .entry .t-box p { line-height:1.8em;}


/*　右サイドカラム　*/
.mright-container{}
#mright{ width:50%; padding-bottom:50px;}
#mright .sbox{ margin-bottom:40px;}
#mright h2{ font-size:19px; font-weight:bold; letter-spacing:normal; padding-bottom:3px; position:relative; margin-bottom:10px;}
#mright h2 span{ font-size:13px; font-weight:500; color:#55abbb; display:inline-block; margin-left:10px;}
#mright h2:before{ box-sizing: inherit; display: block; height: 1px; position: absolute; content: ""; bottom:0; left:0; width: 40%; z-index: 1; background:#55abbb;}
#mright h2:after { content: ""; bottom: 0; left: 0; width: 100%; background:#ddd; box-sizing: inherit; display: block; height: 1px; position: absolute; z-index: 0;}


#mright #sbox-01{ border:1px solid #ddd; padding:4px;}
#mright #sbox-01 .bk-img{ width:100%; height:150px; object-fit:cover;}
#mright #sbox-01 .icon{ margin:-60px 0 10px; text-align:center;}
#mright #sbox-01 .icon img{ background: #fdfdfd; border: 4px solid #fdfdfd; border-radius: 50%; width: 120px; height: 120px; -o-object-fit: cover; object-fit: cover;}
#mright #sbox-01 .p-name{ text-align:center; letter-spacing:2px; margin-bottom:3px;}
#mright #sbox-01 .p-01{ font-size:12px; color:#999; text-align:center; letter-spacing:normal; margin-bottom:10px;}
#mright #sbox-01 .p-02{ font-size:14px; letter-spacing:normal; padding:0 10px 5px; text-align: justify}
#mright #sbox-01 .btn{ padding:10px 30px 20px;}
#mright #sbox-01 .btn a{ background:#55abbb; font-size:14px; color:#fff; letter-spacing:normal; text-decoration:none; display:block; text-align:center; padding:7px 0; border-radius:30px;}
#mright #sbox-01 .btn a:hover{ box-shadow: 0 4px 12px rgb(0 0 0 / 10%), 0 12px 24px -12px rgb(0 0 0 / 10%); opacity: 1;}

#mright #sbox-02{}
#mright #sbox-02 ul{}
#mright #sbox-02 ul li{ border-bottom:1px solid #ddd;}
#mright #sbox-02 ul li a{ background:url(../images2/blog/icon-f.png) left 10px top 14px no-repeat; font-size:15px; color:#555; background-size:16px auto; padding:10px 10px 10px 35px; letter-spacing:normal; text-decoration:none; display:block; transition: 0.2s;}
#mright #sbox-02 ul li a span{ transition: 0.2s;}
#mright #sbox-02 ul li a:hover{ background-color:#e9f8fb; opacity:1; transition: 0.2s;}
#mright #sbox-02 ul li a:hover span{ padding-left:3px; transition: 0.2s;}

#mright #sbox-03{}
#mright #sbox-03 ul{}
#mright #sbox-03 ul li{ overflow:hidden; margin-bottom:12px;}
#mright #sbox-03 ul li a{ padding:0px; text-decoration:none; display:block; transition: 0.2s;}
#mright #sbox-03 ul li .img{ width:90px; height:90px; float:left; overflow:hidden; border:1px solid #efefef; box-sizing:border-box;}
#mright #sbox-03 ul li img{ width:90px; height:90px; object-fit:cover; float:left;transition: 0.3s;}
#mright #sbox-03 ul li p{ width:170px; font-size:14px; font-weight:500; color:#555; letter-spacing:normal; display:inline-block; float:right; padding-top:2px;}
#mright #sbox-03 ul li a:hover{ opacity:0.9; transition: 0.2s;}
#mright #sbox-03 ul li a:hover img{ -webkit-transform: scale(1.04); transform: scale(1.04); transition: 0.3s;}


/* キーワードで探す */
#mright #sbox-05 .tag-area{ margin:auto; display: flex; flex-wrap: wrap;}
#mright #sbox-05 .tag-area a{ background:#f7f7f7; border-radius:30px; margin: 2px; flex: 1 1 auto; display: flex; justify-content: space-between;color:#333; display: block; text-decoration: none; font-size:12px; letter-spacing:normal; padding: 0.2rem 0.4rem 0.2rem 0.4rem; transition: background-color 0.5s;-webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;}
#mright #sbox-05 .tag-area a::before { content: '#'; color:#aaa; margin-right: 0.1rem;}
#mright #sbox-05 .tag-area a:hover { opacity:1; filter: alpha(opacity=50); background-color:#c5f0f8;}
  }}

  @media (max-width : 520px){
  #blog #main{ padding:50px 0 0;}
#blog #main-blog { width:100%; margin:auto;margin-bottom:70px;}


#blog #mleft { width:680px;text-align: center;}
#blog #mleft .box{ width:680px;}

#blog #box-01{ padding-top:0px;}
#blog #box-01 .area-01{}
#blog #box-01 .area-01 .entry{ padding:50px 0; border-bottom:1px solid #a11f24;}
#blog #box-01 .area-01 .entry img{ width:200px; height:200px; object-fit: contain; margin-right:30px;}
#blog #box-01 .area-01 .entry .t-box{padding-top:10px;}
#blog #box-01 .area-01 .entry .t-box h2{ font-size:24px; font-weight:600; color:#a11f24; margin-bottom:25px;}
#blog #box-01 .area-01 .entry .t-box h2 a{color:#759E5C;}
#blog #box-01 .area-01 .entry .t-box p { line-height:1.8em;}


/*　右サイドカラム　*/
.mright-container{overflow: hidden;}
#mright{ width:50%; padding-bottom:50px;}
#mright .sbox{ margin-bottom:40px;}
#mright h2{ font-size:19px; font-weight:bold; letter-spacing:normal; padding-bottom:3px; position:relative; margin-bottom:10px;}
#mright h2 span{ font-size:13px; font-weight:500; color:#55abbb; display:inline-block; margin-left:10px;}
#mright h2:before{ box-sizing: inherit; display: block; height: 1px; position: absolute; content: ""; bottom:0; left:0; width: 40%; z-index: 1; background:#55abbb;}
#mright h2:after { content: ""; bottom: 0; left: 0; width: 100%; background:#ddd; box-sizing: inherit; display: block; height: 1px; position: absolute; z-index: 0;}


#mright #sbox-01{ border:1px solid #ddd; padding:4px;}
#mright #sbox-01 .bk-img{ width:100%; height:150px; object-fit:cover;}
#mright #sbox-01 .icon{ margin:-60px 0 10px; text-align:center;}
#mright #sbox-01 .icon img{ background: #fdfdfd; border: 4px solid #fdfdfd; border-radius: 50%; width: 120px; height: 120px; -o-object-fit: cover; object-fit: cover;}
#mright #sbox-01 .p-name{ text-align:center; letter-spacing:2px; margin-bottom:3px;}
#mright #sbox-01 .p-01{ font-size:12px; color:#999; text-align:center; letter-spacing:normal; margin-bottom:10px;}
#mright #sbox-01 .p-02{ font-size:14px; letter-spacing:normal; padding:0 10px 5px; text-align: justify}
#mright #sbox-01 .btn{ padding:10px 30px 20px;}
#mright #sbox-01 .btn a{ background:#55abbb; font-size:14px; color:#fff; letter-spacing:normal; text-decoration:none; display:block; text-align:center; padding:7px 0; border-radius:30px;}
#mright #sbox-01 .btn a:hover{ box-shadow: 0 4px 12px rgb(0 0 0 / 10%), 0 12px 24px -12px rgb(0 0 0 / 10%); opacity: 1;}

#mright #sbox-02{}
#mright #sbox-02 ul{}
#mright #sbox-02 ul li{ border-bottom:1px solid #ddd;}
#mright #sbox-02 ul li a{ background:url(../images2/blog/icon-f.png) left 10px top 14px no-repeat; font-size:15px; color:#555; background-size:16px auto; padding:10px 10px 10px 35px; letter-spacing:normal; text-decoration:none; display:block; transition: 0.2s;}
#mright #sbox-02 ul li a span{ transition: 0.2s;}
#mright #sbox-02 ul li a:hover{ background-color:#e9f8fb; opacity:1; transition: 0.2s;}
#mright #sbox-02 ul li a:hover span{ padding-left:3px; transition: 0.2s;}

#mright #sbox-03{}
#mright #sbox-03 ul{}
#mright #sbox-03 ul li{ overflow:hidden; margin-bottom:12px;}
#mright #sbox-03 ul li a{ padding:0px; text-decoration:none; display:block; transition: 0.2s;}
#mright #sbox-03 ul li .img{ width:90px; height:90px; float:left; overflow:hidden; border:1px solid #efefef; box-sizing:border-box;}
#mright #sbox-03 ul li img{ width:90px; height:90px; object-fit:cover; float:left;transition: 0.3s;}
#mright #sbox-03 ul li p{ width:170px; font-size:14px; font-weight:500; color:#555; letter-spacing:normal; display:inline-block; float:right; padding-top:2px;}
#mright #sbox-03 ul li a:hover{ opacity:0.9; transition: 0.2s;}
#mright #sbox-03 ul li a:hover img{ -webkit-transform: scale(1.04); transform: scale(1.04); transition: 0.3s;}


/* キーワードで探す */
#mright #sbox-05 .tag-area{ margin:auto; display: flex; flex-wrap: wrap;}
#mright #sbox-05 .tag-area a{ background:#f7f7f7; border-radius:30px; margin: 2px; flex: 1 1 auto; display: flex; justify-content: space-between;color:#333; display: block; text-decoration: none; font-size:12px; letter-spacing:normal; padding: 0.2rem 0.4rem 0.2rem 0.4rem; transition: background-color 0.5s;-webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;}
#mright #sbox-05 .tag-area a::before { content: '#'; color:#aaa; margin-right: 0.1rem;}
#mright #sbox-05 .tag-area a:hover { opacity:1; filter: alpha(opacity=50); background-color:#c5f0f8;}
  }


/*
COLORS
================================================ */
:root {
  /* Color */
  --light-grey: #ccc;
  --grey: #666;
  --dark-grey: #707070;
  --green: #7bba93;
  --dark-blue: #39565C;
  --white: #fff;
  --pale-yellow: #F9F9F4;
  
  /* Font/Space Size */
  --font-sm: .75rem;
  --font-md: 1rem;
  --font-lg: 1.25rem;
  --font-xl: 1.625rem;

  /* Border Radius Size */
  --round-sm: 6px;
  --round-md: 10px;
  --round-lg: 50%;
}

/*
GENERAL STYLING
================================================ */
/* body {
color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--pale-yellow);
} */

/*
COMMON
================================================ */
/* p {
  line-height: 1.7;
}
img,
iframe {
  max-width: 100%;
} */

/*
LAYOUT
================================================ */
.wrapper {
  width: 80%;
  margin: 0 auto;
  /*padding: 0 1rem;*/
}

/*
MAIN
================================================ */
#index main .main-contents {
  margin-bottom: 3rem;
}

/*
POST LIST
================================================ */
#index main .main-contents .post-list,
.archive .post-list,
.search .post-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}
#index main .main-contents .post-list .post-item {
  background: var(--white);
  border-radius:0 0 10px 10px;
  position: relative;
  background-color: #fffdf5;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}
#index main .main-contents .post-list .post-item a img{border-radius: 10px 10px 0 0;}
#index main .main-contents .post-list .post-item .wp-post-image {
  border-radius:10px 10px 0 0;
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
}
#index main .main-contents .post-list .post-item .post-header {
  padding: 1rem;
}
#index main .main-contents .post-list .post-item .post-header .post-title {
  margin-bottom: .5rem;
  line-height: 1.5;
  word-break: break-word;
}
#index main .main-contents .post-list .post-item .post-header .post-date {
  color: var(--light-grey);
  font-size: var(--font-sm);
}
#index main .main-contents .post-list .post-item .post-header .post-categories {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#index main .main-contents .post-list .post-item .post-header .post-categories li {
  background:linear-gradient(-135deg, rgba(0, 191, 255,0.75), rgba(30, 138, 118,0.75));
  color:#fff;
  font-size: var(--font-sm);
  border-radius:7px;
  padding: .5rem;
  line-height: 0.8;
}

/* Post navigation */
.nav-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.nav-links a{
  padding: .75rem 1rem .85rem;
  background: var(--green);
  border-radius: var(--round-sm);
  color: var(--white);
  box-shadow: 0 4px 10px rgba(123, 186, 147, .6);
}

/* Archive */
.page-title {
  margin-bottom: 1.5rem;
  text-align: center;
}

/*
MEDIUM SIZE
================================================ */
@media (max-width : 960px){
@media (min-width : 521px){
  /* LAYOUT  */
      .wrapper {
          max-width: 1000px;
          padding: 0 3rem;
      }
  /* Archive */
  .page-title {
    font-size: var(--font-xl);
    margin-bottom: 2rem;
  }

  /* MAIN */
  #index main .main-contents .post-list,
  .archive .post-list,
  .search .post-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  #index main .main-contents .post-list .post-item:hover {
    box-shadow: 0 0 10px rgba(0,0,0,.16);
  }
  #index main .main-contents .post-list .post-item .post-header .post-categories li:hover {
    background: var(--dark-grey);
  }
  .nav-links a:hover {
    background: var(--dark-blue);
    box-shadow: 0 4px 10px rgba(57, 86, 92, .6);
  }
  #index main .main-contents .post-list .post-item .wp-post-image {
    aspect-ratio: 4 / 3;
  }
}}

/*
LARGE SIZE
================================================ */
@media(min-width: 961px){
  #index main .main-contents .post-list,
  .archive .post-list,
  .search .post-list {
      grid-template-columns: repeat(4, 1fr);
  }
}