/* ●PCサイズに適用するCSS● */
body,table {
width: 100% ;
margin: 0 0 ;	/* 左右に[auto]を指定することで、真ん中に寄る */
padding: 0 ;		/* 上下左右の余白を0にしておく */
	}
	
div.page {
width: 950px ;
margin: 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
padding: 0 ;		/* 上下左右の余白を0にしておく */
	}
	
table {
width: auto ;
margin: 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
padding: 0 ;		/* 上下左右の余白を0にしておく */
	}

img {
max-width: 100%;
height: auto;
    }
    
iframe.movie {
max-width: 60%;

    }

div.page2 {
width: 1050px ;
margin: 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
padding: 0 ;		/* 上下左右の余白を0にしておく */
	}
	
div.page2 img {
max-width: 100%;
height: auto;
    }



/* ●スマホだけに適用するCSS● */
@media screen and ( max-width:950px ) {

body {
width: auto ;
padding: 0 0px ;		/* 左右の余白 */
	}
	
div.page {
width: auto ;
padding: 0 10px ;		/* 左右の余白 */
	}
	
div.page2 {
width: auto ;
padding: 0 10px ;		/* 左右の余白 */
	}

table {
width: auto ;
padding: 10 ;		/* 上下左右の余白を0にしておく */
	}
	

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

    
iframe {
max-width: 100%;

    }
    
iframe.movie {
max-width: 100%;

    }
    
}



/* ●文字関連● */
body,table,tbody,td,tr,th {
font-size:18px;
line-height:115%;
color:black;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
	}


/* ●文字関連スマホ● */

@media screen and ( max-width:950px ) {

body,table,tbody,td,tr,th {
font-size:18px;
line-height:100%;
color:black;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
	}

}




/* ●リンク関連● */
a:link { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #000000; }
a:active { color: #1E5099; }

a:hover img {
filter: alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.8;
}



/* ●TOPスクロール関連● */
#page-top {
    position: fixed;
    bottom: 10px;
    right: 0px;
    font-size: 77%;
}
#page-top a {
    background: ;
    text-decoration: none;
    color: ;
    width: 55px;
    padding: 0px 0;
    text-align: center;
    display: block;
    border-radius: 0px;
}
#page-top a:hover {
    text-decoration: none;
    background: ;
}



/* ●メニュー関連● */

/* --- ナビゲーションバー --- */
div.nav2 {
width: 100%; /* ナビゲーションの幅 */
font-size:16px;
}

/* --- メニューエリア --- */
div.nav2 ul.nl {
margin: 0;
padding: 0;
border-top: 1px #c0c0c0 dotted; /* 最上部の境界線 */
list-style-type: none;
text-align: left;
}

/* --- メニュー項目 --- */
div.nav2 ul.nl li {
padding: 3px 1px; /* 項目のパディング（上下、左右） */
background-color: #f9f9f9; /* 項目の背景色 */
border-bottom: 1px #c0c0c0 dotted; /* 項目の下境界線 */
}

/* --- リンク --- */
div.nav2 ul.nl li a {
display: block;
position: relative; /* IE6用 */
padding: 8px 10px; /* リンクエリアのパディング（上下、左右） */
border-left: 4px #1E5099 solid; /* リンクエリアの左境界線 */
text-decoration: none; /* テキストの下線（なし） */
}
/* --- ポイント時の設定 --- */
div.nav2 ul.nl li a:hover {
border-left-color: #ff0000; /* ポイント時の左境界線色 */
}



/* ●ヘッダーメニュー関連● */

/* --- ナビゲーションバー --- */
div.nav {
width: 100%; /* ナビゲーションの幅 */
background: #f9f9f9 url(https://gigaplus.makeshop.jp/gion/gaid/img/hor_menu3_off.gif) repeat-x top; /* ナビゲーションの背景 */
border-top: 1px #cccccc solid; /* 上境界線 */
border-bottom: 1px #cccccc solid; /* 下境界線 */
font-size:13px;
}

/* --- メニューエリア --- */
div.nav ul.nl {
width: 100%; /* メニューの幅 */
margin: 0 auto; /* センターに配置 */
padding: 0;
background: #f9f9f9 url(https://gigaplus.makeshop.jp/gion/gaid/img/hor_menu3_off.gif) repeat-x top; /* メニューの背景 */
border-left: 1px #cccccc solid; /* メニューの左境界線 */
border-right: 1px #ffffff solid; /* メニューの右境界線 */
list-style-type: none;
text-align: center;
}

/* --- メニュー項目 --- */
div.nav ul.nl li {
width: 25%; /* 項目の幅 */
float: left;
}

/* --- リンク --- */
div.nav ul.nl li a {
display: block;
position: relative; /* IE6用 */
padding: 12px 2px; /* リンクエリアのパディング（上下、左右） */
border-top: 1px #ffffff solid; /* リンクエリアの上境界線 */
border-bottom: 1px #808080 solid; /* リンクエリアの下境界線 */
border-left: 1px #ffffff solid; /* リンクエリアの左境界線 */
border-right: 1px #cccccc solid; /* リンクエリアの右境界線 */
text-decoration: none; /* テキストの下線（なし） */
}
/* --- ポイント時の設定 --- */
div.nav ul.nl li a:hover {
background: #f9f9f9 url(https://gigaplus.makeshop.jp/gion/gaid/img/hor_menu3_on.gif) repeat-x top; /* ポイント時の背景 */
text-decoration: underline; /* テキストの下線（あり） */
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}



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

@media only screen and (max-width: 768px) {
    img { max-width: 100%; }
}










/* ▼▼▼　202403からの追加分　▼▼▼ */


div.page3 {
width: 750px ;
margin: 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
padding: 0 ;		/* 上下左右の余白を0にしておく */
	}
	
/* ●スマホだけに適用するCSS● */
@media screen and ( max-width:950px ) {
div.page3 {
width: auto ;
padding: 0 10px ;		/* 左右の余白 */
	}
	}


.icon0 {
     width: 15%;
     float:left;
}
.main0 {
     width: calc(85% - 15px);
     float:right;
}





.sono1 {
     width: 20%;
     float:center;
}
.sono2 {
     width: calc(50% - 50px);
     float:center;
}
.sono3 {
     width: 20%;
     float:center;
}
.yajirushi1 {
     width: 5%;
     float:center;
}
.yajirushi2 {
     width: 5%;
     float:center;
}
@media only screen and (max-width: 950px) {
.sono1 {
     width: 100%;
     float:center;
}
.sono2 {
     width: 100%;
     float:center;
}
.sono3 {
     width: 100%;
     float:center;
}
.yajirushi1 {
     width: 100%;
     float:center;
}
.yajirushi2 {
     width: 100%;
     float:center;
}
}




.hito1 {
     width: 15%;
     float:left;
}
.fukidashi1 {
     width: calc(85% - 15px);
     float:right;
}
@media only screen and (max-width: 950px) {
.hito1 {
     width: 20%;
     float:left;
}
.fukidashi1 {
     width: calc(80% - 20px);
     float:right;
}
}




  .column22 {
    width: calc(50% - 16.18px / 2);
}

@media only screen and (max-width: 950px) {
  .column22 {
    width: calc(100% - 16.18px / 2);
}
}






.answer1 {
     width: 15%;
     float:center;
     
}
.answer2 {
     width: calc(85% - 15px);
     float:center;
}
@media only screen and (max-width: 950px) {
.answer1 {
     width: 100%;
     float:center;
}
.answer2 {
     width: 100%;
     float:center;
}
}




/* ヘッダー2 親要素 */
.parent1 {
  display: table;
  width: 100%;
  height: 110px;

}
/* ヘッダー2 子要素 */
.child1 {
  display: table-cell;
  vertical-align: middle;
text-align:left;
}
@media only screen and (max-width: 950px) {
/* ヘッダー2 親要素 */
.parent1 {
  display: table;
  width: 100%;
  height: 90px;

}
/* ヘッダー2 子要素 */
.child1 {
  display: table-cell;
  vertical-align: middle;
text-align:left;
}
}




/* その1 矢印用 親要素 */
.parent2 {
  display: table;
  width: 40px;
  height: 180px;

}
/* その1 子要素 */
.child2 {
  display: table-cell;
  vertical-align: middle;
text-align:center;
}

@media only screen and (max-width: 950px) {
/* その1 矢印用 親要素 */
.parent2 {
  display: table;
  width: 100%;
  height: 80px;

}
/* その1 子要素 */
.child2 {
  display: table-cell;
  vertical-align: middle;
text-align:center;
}
}




/* その1 矢印2用 親要素 */
.parent22 {
  display: table;
  width: 100%;
  height: 160px;

}
/* その1 子要素 */
.child22 {
  display: table-cell;
  vertical-align: middle;
text-align:left;
}

@media only screen and (max-width: 950px) {
/* その1 矢印2用 親要素 */
.parent22 {
  display: table;
  width: 100%;
  height: 140px;

}
/* その1 子要素 */
.child22 {
  display: table-cell;
  vertical-align: middle;
text-align:left;
}
}


/* その1 矢印2用 親要素 */
.parent222 {
  display: table;
  width: 100%;
  height: 110px;

}
/* その1 子要素 */
.child222 {
  display: table-cell;
  vertical-align: middle;
}
@media only screen and (max-width: 950px) {
/* その1 矢印2用 親要素 */
.parent222 {
  display: table;
  width: 100%;
  height: 110px;

}
/* その1 子要素 */
.child222 {
  display: table-cell;
  vertical-align: middle;
}
}


/* 吹き出し 親要素 */
.parent3 {
  display: table;
  width: 100%;
  height: 130px;

}
/* 吹き出し 子要素 */
.child3 {
  display: table-cell;
  vertical-align: middle;
text-align:center;
}



/* 吹き出し左  */
.arrow_box_left{
    position:relative;
    height:130px;
    line-height:130%;
    background:#FFFFFF;
    padding:15px;
    text-align:center;
    border:4px solid #000000;
    color:#000000;
    font-size: clamp(18px, 2.3vw, 28px);
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
}
.arrow_box_left:after,.arrow_box_left:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:50%;
}
.arrow_box_left:after{
    border-color: rgba(255, 255, 255, 0);
    border-top-width:7px;
    border-bottom-width:7px;
    border-left-width:12px;
    border-right-width:12px;
    margin-top: -7px;
    border-right-color:#FFFFFF;
}
.arrow_box_left:before{
    border-color: rgba(0, 0, 0, 0);
    border-top-width:11px;
    border-bottom-width:11px;
    border-left-width:18px;
    border-right-width:18px;
    margin-top: -11px;
    margin-right: 4px;
    border-right-color:#000000;
}


/* 吹き出し右  */

.arrow_box_right{
    position:relative;
    height:130px;
    line-height:130%;
    background:#FFFFFF;
    padding:15px;
    text-align:center;
    border:4px solid #000000;
    color:#000000;
    font-size: clamp(18px, 2.3vw, 28px);
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
}
.arrow_box_right:after,.arrow_box_right:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    left:100%;
    top:50%;
}
.arrow_box_right:after{
    border-color: rgba(255, 255, 255, 0);
    border-top-width:7px;
    border-bottom-width:7px;
    border-left-width:12px;
    border-right-width:12px;
    margin-top: -7px;
    border-left-color:#FFFFFF;
}
.arrow_box_right:before{
    border-color: rgba(0, 0, 0, 0);
    border-top-width:11px;
    border-bottom-width:11px;
    border-left-width:18px;
    border-right-width:18px;
    margin-top: -11px;
    margin-left: 4px;
    border-left-color:#000000;
}






/* 文字系　 */



/* 文字 */

.text_16 {
  color: #000000;
  font-size: clamp(8px, 2.8vw, 16px);
  line-height:150%;
}
.text_18 {
  color: #000000;
  font-size: clamp(10px, 2.8vw, 18px);
  line-height:150%;
}
.text_20 {
  color: #000000;
  font-size: clamp(12px, 2.8vw, 20px);
  line-height:150%;
}
.text_22 {
  color: #000000;
  font-size: clamp(14px, 2.8vw, 22px);
  line-height:150%;
}
.text_24 {
  color: #000000;
  font-size: clamp(16px, 2.8vw, 24px);
  line-height:150%;
}
.text_26 {
  color: #000000;
  font-size: clamp(18px, 2.8vw, 26px);
  line-height:150%;
}
.text_28 {
  color: #000000;
  font-size: clamp(20px, 2.8vw, 28px);
  line-height:150%;
}
.text_30 {
  color: #000000;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height:150%;
}
.text_32 {
  color: #000000;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height:150%;
}
.text_34 {
  color: #000000;
  font-size: clamp(26px, 2.8vw, 34px);
  line-height:150%;
}
.text_36 {
  color: #000000;
  font-size: clamp(28px, 2.8vw, 36px);
  line-height:150%;
}

.text_38 {
  color: #000000;
  font-size: clamp(30px, 2.8vw, 38px);
  line-height:150%;
}





.text_22_b {
  color: #000000;
  font-size: clamp(14px, 2.8vw, 22px);
  font-weight:bold;
  line-height:150%;
}
.text_24_b {
  color: #000000;
  font-size: clamp(16px, 2.8vw, 24px);
  font-weight:bold;
  line-height:150%;
}
.text_26_b {
  color: #000000;
  font-size: clamp(18px, 2.8vw, 26px);
  font-weight:bold;
  line-height:150%;
}
.text_28_b {
  color: #000000;
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight:bold;
  line-height:150%;
}
.text_30_b {
  color: #000000;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight:bold;
  line-height:150%;
}
.text_32_b {
  color: #000000;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight:bold;
  line-height:150%;
}

.text_34_b {
  color: #000000;
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight:bold;
  line-height:150%;
}

.text_36_b {
  color: #000000;
  font-size: clamp(28px, 2.8vw, 36px);
  font-weight:bold;
  line-height:150%;
}

.text_42_b {
  color: #000000;
  font-size: clamp(34px, 2.8vw, 42px);
  font-weight:bold;
  line-height:150%;
}





/* 上部文字色赤系 */
.text_red_b {
  color: #CC0000;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight:bold;
  line-height:130%;
}

/* 上部の文字色青系 */
.text_blue_b {
  color: #006699;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight:bold;
  line-height:130%;
}



.text_24_answer {
  color: #000000;
  font-size: clamp(18px, 2.8vw, 24px);
  line-height:140%;
  text-shadow: 2px 2px 2px #ffffff;
}





/* 34文字色青系 */
.text_34_b_blue {
  color: #006699;
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight:bold;
  line-height:140%;
}

/* 42文字色青系 */
.text_42_b_blue {
  color: #006699;
  font-size: clamp(34px, 3.2vw, 42px);
  font-weight:bold;
  line-height:130%;
}







/* 34文字色緑系 */
.text_34_b_green {
  color: #76B200;
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight:bold;
  line-height:140%;
}

/* 40文字色緑系 */
.text_40_b_green {
  color: #76B200;
  font-size: clamp(28px, 3.0vw, 40px);
  font-weight:bold;
  line-height:130%;
}

/* 42文字色緑系 */
.text_42_b_green {
  color: #76B200;
  font-size: clamp(32px, 3.2vw, 42px);
  font-weight:bold;
  line-height:130%;
}

/* 48文字色緑系 */
.text_48_b_green {
  color: #76B200;
  font-size: clamp(38px, 4.0vw, 48px);
  font-weight:bold;
  line-height:130%;
}





/* 30文字色ピンク系 */
.text_30_b_pink {
  color: #FF6E93;
  font-size: clamp(20px, 3.2vw, 30px);
  font-weight:bold;
  line-height:140%;
}

/* 34文字色ピンク系 */
.text_34_b_pink {
  color: #FF6E93;
  font-size: clamp(23px, 3.2vw, 34px);
  font-weight:bold;
  line-height:140%;
}

/* 38文字色ピンク系 */
.text_38_b_pink {
  color: #FF6E93;
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight:bold;
  line-height:130%;
}

/* 42文字色ピンク系 */
.text_42_b_pink {
  color: #FF6E93;
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight:bold;
  line-height:130%;
}











/* ヘッダータイトル */
.head_title {
display:block;padding-left:0.3em;background-color:#3366CC; padding:10px 10px 10px 10px;text-align:left;font-size: 10px;text-align:center;color:#ffffff;font-weight:bold;line-height:120%;
}

@media only screen and (max-width: 950px) {
.head_title {
display:block;padding-left:0.1em;background-color:#3366CC; padding:10px 10px 10px 10px;text-align:left;font-size: 6px;text-align:center;color:#ffffff;font-weight:bold;line-height:120%;
}
}





/* キャンペーン対象商品部分 */

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 1em 1.5em;
    border: solid 3px #76B200;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 22px;
    background: #E9F8D7;
    color: #76B200;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}




/* キャンペーン対象店舗 */

h1 {
  position: relative;
  color: #AA1853;
  font-size: clamp(35px, 5.0vw, 80px);
  padding: 10px 0;
  text-align: center;
  margin: 1.2em 0;
}
h1:before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 6px solid #FF6E93;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}


@media only screen and (max-width: 950px) {
h1 {
  position: relative;
  color: #AA1853;
  font-size: clamp(25px, 5.0vw, 35px);
  padding: 15px 0;
  text-align: center;
  margin: 1.5em 0;
}
h1:before {
  content: "";
  position: absolute;
  top: -35px;
  left: 50%;
  width: 150px;
  height: 110px;
  border-radius: 50%;
  border: 6px solid #FF6E93;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
}





h3{
  position: relative;
  margin-bottom: 2em;
  padding: 1.5rem 2rem;
  border-radius: 10px;
  background: #AA1853;
  font-size: clamp(35px, 4.0vw, 65px);
}

h3:before,
h3:after {
  position: absolute;
  content: '';
  border-radius: 50%;
  background: #AA1853;
}

h3:before {
  bottom: -15px;
  left: 30px;
  width: 30px;
  height: 30px;
}

h3:after {
  bottom: -30px;
  left: 50px;
  width: 15px;
  height: 15px;
}







/* 信頼の老舗・インターネットで */


h2 {
position: relative;
padding: 1.0em;
background-color: #FF6E93;
font-size: clamp(20px, 2.8vw, 24px);
line-height:120%;
margin: 0.8em 0;
box-shadow: 5px 5px 0px 0 #000000;
border-radius: 50px 50px;
}
h2:after {
position: absolute;
content: '';
top: 100%;
left: 15%;
width: 0;
height: 0;
border: 25px solid transparent;
border-top: 30px solid #FF6E93;
}







/* フォント */

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}






a.btn_18 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 50%;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 10px;
	color: #AA1853;
	border: 2px solid #AA1853;
	box-shadow: 5px 5px #AA1853;
	transition: 0.2s ease-in-out;
}
a.btn_18:hover {
	box-shadow: none;
	transform: translate(5px, 5px);
	color: #AA1853;
}