@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell.loos-web-studio.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* パンチ　BOX　Ｃ */
.punch-box-c {
 position: relative;
 margin: 2em auto;
 padding: 15px 15px 15px 35px;
 width: 90%; /* ボックス幅 */
 background-color: #F0F8FF; /* ボックス背景色 */
 color: #666; /* 文章色 */
 border: 1px solid #88b5d3; /* ボックス枠線 */
 box-shadow: 0 0 2px 1px #ccc; /* 影 */
 border-radius: 10px; /* 角の丸み */
}
.punch-box-c::before {
 position: absolute;
 content: '';
 left: 8px;
 top: 8px;
 width: 17px;
 height : 17px;
 background-color: #fff; /*穴背景色*/
 box-shadow: 0 0 8px #aaa inset; /*穴の影*/
 border: 1px solid #88b5d3; /*パンチ穴枠色*/
 border-radius: 50%;
}

/************************************
** 画像キャプション
************************************/
.caption-icon-wrap{
   margin:0 auto 2em;
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}
.caption-icon-wrap > p{
   position:relative;
}
.caption-icon-wrap > p > img,.caption-icon-wrap > p >amp-img{
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   display:block;
}
.caption-icon-wrap > p > amp-img{
   max-width:800px;
}
.caption-icon-wrap .img-caption{
   position: absolute;
   font-size: 13px; /* フォントサイズ*/
   line-height:1.5; /* 行間*/
}
.caption-icon-wrap .caption-icon-img{
   position: absolute;
}

/************************************
** 画像キャプション　アイコン①(左上)
************************************/
.caption-icon-1{
  margin-top:5em; /* 上に余白 */
}
/* 画像説明文 */
.caption-icon-1 .img-caption{
  bottom: 103%; /* 下から数値分移動 */
  left: 72px; /* 左から数値分移動 */
}
/* アイコン位置 */
.caption-icon-1 .caption-icon-img{
  top: -63px; /* 上から数値分移動 */
  left: 5px; /* 左から数値分移動動 */
}
/* アイコン画像 */
.caption-icon-1 .caption-icon-img img,.caption-icon-1 .caption-icon-img amp-img{
  max-width:60px; /* アイコンサイズ */
  margin:0 !important;
  padding:0 !important;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
  /* (スマホ)画像説明文 */
  .caption-icon-1 .img-caption{
    bottom:103%; /* 下から数値分移動 */
    left: 52px; /* 左から数値分移動置*/
    font-size: 12px; /* フォントサイズ*/
  }
  /* (スマホ)アイコン位置 */
  .caption-icon-1 .caption-icon-img{
    top: -43px; /* 上から数値分移動 */
    left: 5px; /* 左から数値分移動 */
  }
  /* (スマホ)アイコン画像 */
  .caption-icon-1 .caption-icon-img img,.caption-icon-1 .caption-icon-img amp-img{
    max-width:40px; /* アイコンサイズ */
  }
}

/************************************
** 画像キャプション　アイコン③(中央上)
************************************/
.caption-icon-3{
  margin-top:5.5em; /* 上に余白 */
}
/* 画像説明文 */
.caption-icon-3 .img-caption{
  top: -75px; /* 上から数値分移動 */
  text-align:center;
  width:100%;
}
/* 吹き出し */
.caption-icon-3 .img-caption::before{
  content:"＼ ";
}
/* 吹き出し */
.caption-icon-3 .img-caption::after{
  content:" ／";
}
/* アイコン位置(中央配置) */
.caption-icon-3 .caption-icon-img{
  top: -47px; /* 上から数値分移動 */
  left: 50%; /* 左から数値分移動(中央配置) */
  -webkit-transform: translateY(0) translateX(-50%);/* (中央配置) */
  transform: translateY(0) translateX(-50%);/* (中央配置) */
}
/* アイコン画像 */
.caption-icon-3 .caption-icon-img img,.caption-icon-3 .caption-icon-img amp-img{
  max-width:80px; /* アイコンサイズ */
  margin:0 !important;
  padding:0 !important;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
  /* (スマホ)画像説明文 */
  .caption-icon-3 .img-caption{
    top:inherit;
    bottom: 123%; /* 下から数値分移動 */
    font-size: 12px; /* フォントサイズ*/
  }
  /* (スマホ)アイコン位置 */
  .caption-icon-3 .caption-icon-img{
    top:-36px; /* 上から数値分移動 */
  }
  /* (スマホ)アイコン画像 */
  .caption-icon-3 .caption-icon-img img,.caption-icon-3 .caption-icon-img amp-img{
    max-width:60px; /* アイコンサイズ */
  }
}