@charset "UTF-8";
@font-face {
  font-family: 'google_sans';
  src: url('../font/googlesans-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'google_sans';
  src: url('../font/googlesans-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'google_sans';
  src: url('../font/googlesans-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
/* -----------------------------------------
 Reset
------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
em {
  font-style: normal;
}
a {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
  -webkit-tap-highlight-color: rgba(0,0,0,.1);
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ddd;
  margin: .8rem 0;
  padding: 0;
}
input, select {
  vertical-align: middle;
}
sup{
  font-size: 0.6em;
  vertical-align: top;
  position: relative;
  top: -0.1em;
}
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  border: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
}
select::-ms-expand {
  display: none;
}
[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}
[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}
button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}
/* -----------------------------------------
 基本
------------------------------------------- */
html {
  font-size: 62.5%;
  font-size: calc(1em*.625);
}
body {
  color: #3E3A39;
  background: #fff;
  font-size: 1.6rem;
  font-family: 'google_sans', 'Noto Sans JP', sans-serif;
  -webkit-text-size-adjust: 100%;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
main {
  display: block;
  padding: 0;
  position: relative;
}
.hide-pc,
.hide{ display: none; }
/* -----------------------------------------
 文字装飾
------------------------------------------- */
/*
 *  utility
 * ------------------------------------------------------------------- */
.center,.txt-center { text-align: center !important; }
.txt-right { text-align: right !important; }
.txt-left { text-align: left !important; }
.mb0 { margin-bottom: 0 !important; }
.mb10 { margin-bottom: 1rem !important; }
.mb20 { margin-bottom: 2rem !important; }
.mb30 { margin-bottom: 3rem !important; }
.mb40 { margin-bottom: 4rem !important; }
.mb50 { margin-bottom: 5rem !important; }
.mb60 { margin-bottom: 6rem !important; }
.mb70 { margin-bottom: 7rem !important; }
.mb80 { margin-bottom: 8rem !important; }
.mb1em { margin-bottom: 1.2em !important; }

.mt0 { margin-top: 0 !important; }
.mt10 { margin-top: 1rem !important; }
.mt20 { margin-top: 2rem !important; }
.mt30 { margin-top: 3rem !important; }
.mt40 { margin-top: 4rem !important; }
.mt50 { margin-top: 5rem !important; }
.mt60 { margin-top: 6rem !important; }
.mt70 { margin-top: 7rem !important; }
.mt80 { margin-top: 8rem !important; }
.mt1em { margin-top: 1.2em !important; }

.pb0 { padding-bottom: 0 !important; }
.pb10 { padding-bottom: 1rem !important; }
.pb20 { padding-bottom: 2rem !important; }
.pb30 { padding-bottom: 3rem !important; }
.pb40 { padding-bottom: 4rem !important; }
.pb50 { padding-bottom: 5rem !important; }
.pb60 { padding-bottom: 6rem !important; }
.pb70 { padding-bottom: 7rem !important; }
.pb80 { padding-bottom: 8rem !important; }
.pb1em { padding-bottom: 1.2em !important; }

.pt0 { padding-top: 0 !important; }
.pt10 { padding-top: 1rem !important; }
.pt20 { padding-top: 2rem !important; }
.pt30 { padding-top: 3rem !important; }
.pt40 { padding-top: 4rem !important; }
.pt50 { padding-top: 5rem !important; }
.pt60 { padding-top: 6rem !important; }
.pt70 { padding-top: 7rem !important; }
.pt80 { padding-top: 8rem !important; }
.pt1em { padding-top: 1.2em !important; }

/* SPサイズ */
@media screen and (max-width:639px) {
.sp-left{ text-align:left !important; }
.sp-mb0 { margin-bottom: 0 !important; }
.sp-mb10 { margin-bottom: 1rem !important; }
.sp-mb20 { margin-bottom: 2rem !important; }
.sp-mb30 { margin-bottom: 3rem !important; }
.sp-mb40 { margin-bottom: 4rem !important; }
.sp-mb50 { margin-bottom: 5rem !important; }
.sp-mb60 { margin-bottom: 6rem !important; }
.sp-mb70 { margin-bottom: 7rem !important; }
.sp-mb80 { margin-bottom: 8rem !important; }
.sp-mt0 { margin-top: 0 !important; }
.sp-mt10 { margin-top: 1rem !important; }
.sp-mt20 { margin-top: 2rem !important; }
.sp-mt30 { margin-top: 3rem !important; }
.sp-mt40 { margin-top: 4rem !important; }
.sp-mt50 { margin-top: 5rem !important; }
.sp-mt60 { margin-top: 6rem !important; }
.sp-mt70 { margin-top: 7rem !important; }
.sp-mt80 { margin-top: 8rem !important; }
.sp-pb0 { padding-bottom: 0 !important; }
.sp-pb10 { padding-bottom: 1rem !important; }
.sp-pb20 { padding-bottom: 2rem !important; }
.sp-pb30 { padding-bottom: 3rem !important; }
.sp-pb40 { padding-bottom: 4rem !important; }
.sp-pb50 { padding-bottom: 5rem !important; }
.sp-pb60 { padding-bottom: 6rem !important; }
.sp-pb70 { padding-bottom: 7rem !important; }
.sp-pb80 { padding-bottom: 8rem !important; }
.sp-pb1em { padding-bottom: 1em !important; }
.sp-pt0 { padding-top: 0 !important; }
.sp-pt10 { padding-top: 1rem !important; }
.sp-pt20 { padding-top: 2rem !important; }
.sp-pt30 { padding-top: 3rem !important; }
.sp-pt40 { padding-top: 4rem !important; }
.sp-pt50 { padding-top: 5rem !important; }
.sp-pt60 { padding-top: 6rem !important; }
.sp-pt70 { padding-top: 7rem !important; }
.sp-pt80 { padding-top: 8rem !important; }
.sp-pt1em { padding-top: 1em !important; }
}

.nowrap{
  white-space: nowrap;
}
.b {
  font-weight: bold;
}
.normal {
  font-weight: normal;
}
.red {
  color: #E60012;
}
.blue{
  color: #0077C2;
}
.bold {
  font-weight: bold;
}
.plus{
  color: #fff;
  display: inline-block;
  height:1em;
  width: 1em;
  position: relative;
  font-size: 90%;
  transform: translateY(-0.1em);
  margin:0 0.1em;
}
.plus::before{
  content: "";
  position: absolute;
  display: block;
  top:0;
  bottom: 0;
  left:0;
  right:0;
  margin: auto;
  z-index: -1;
  background: #333;
  transform: translateY(.3em);
  color: #fff;
  border-radius: 50%;
  display: inline-block;
  height:1em;
  width: 1em;
}
p {
  line-height: 1.5;
  margin-bottom: 1em;
}
/* 両端揃え */
.txt-ideograph{
  text-align: justify;
  text-justify: inter-ideograph;
}
.txt-small{ font-size: 1.2rem; }
.txt-xsmall{ font-size: 1rem; }

.f21 {
  font-size: 2.1rem;
}
.f18 {
  font-size: 1.8rem;
}
.f16 {
  font-size: 1.6rem;
}
.f15 {
  font-size: 1.5rem;
}
.f14 {
  font-size: 1.4rem;
}
.f13 {
  font-size: 1.3rem;
}
.f12 {
  font-size: 1.2rem;
}
.f11 {
  font-size: 1.1rem;
}
.f10 {
  font-size: 1rem;
}
.w100 {
  width: 100%;
}
.pc-only {
  display: block;
}
.sp-only {
  display: none;
}

/* -----------------------------------------
 リンク
------------------------------------------- */
a {
  text-decoration: none;
}
a:link {
  color: #339;
}
a:visited {
  color: #639;
}
a:active {
  color: #d00;
}
.btn-wrap {
  margin-top: 3rem;
  margin-bottom: 3rem;
  text-align: center;
}
a.btn {
  display: inline-block;
  padding: .4em 1em;
  border-radius: .8rem;
  color: #fff;
  font-weight: bold;
  font-size: 1.8rem;
  text-align: center;
  background-color: #fff;
  border: 1px solid #666;
  color: #666;
}
/* -----------------------------------------
 Clear Fix
------------------------------------------- */
.cf:after {
  content: "";
  display: block;
  clear: both;
}
/* -----------------------------------------
 レイアウト
------------------------------------------- */
.wrap {
  margin: 0 auto;
  max-width: 76.8rem;
  position: relative;
  padding: 0;
  box-sizing: border-box;
}
.wrap-full{
  margin: 0 auto;
  position: relative;
  padding: 0 3rem;
  box-sizing: border-box;
  /*background:#FCF9F4;*/
}

.comment {
  margin-top: 3rem;
  margin-bottom: 0;
  color: #999;
  font-size: 1.2rem;
  text-align: center;
}
.comment.noindent{
  padding-left: 0;
  text-indent: 0;
}
.comment-wrap {
  display: flex;
  justify-content: center;
}
.comment-wrap .comment {
  padding-left: 0;
  text-indent: 0;
}
.comment a{
  text-decoration: underline;
  color: #999;
}

/* -----------------------------------------
 ヘッダー
------------------------------------------- */
.head-box {
  position: relative;
  padding: 0;
}
.head-sb{
  background-color: #0077C2;
  color: #fff;
  font-weight: bold;
  font-size: 2.8rem;
  text-align: center;
  padding: .7em 0;
}
.head-ttl{
  font-size: 4.8rem;
  text-align: center;
  margin: 1em 0 .3em;
  font-weight: bold;
}
.head-ttl sup{
  top: 1em;
}
.head-ttl2{
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 2rem;
}
.term-box{
  margin: 0 auto;
  position: relative;
  padding: 0 0 .5em;
}
.term {
  display: flex;
  width: 100%;
  margin-bottom: 2rem;
  justify-content: space-between;
}
.term li{
  width: 48%;
  text-align: center;
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
}
.apply-btn{
  position: absolute;
  bottom: 2.5rem;
  left:0;
  right: 0;
  display: block;
  width: 90%;
  margin: auto;
}
.apply-btn a{
  width: 100%;
  background-color: #83958A;
  color: #fff;
  text-align: center;
  border-radius: 1rem;
  overflow: hidden;
  display: block;
  font-size: 2.4rem;
  font-weight: bold;
  padding: 1.5rem 0;
  box-shadow: 0 8px 0 0 #4e6155;
}
.apply-btn.btn2 a{
  background-color: #5e5e5e;
  box-shadow: 0 8px 0 0 #333;
}
.apply-btn a:hover{
  opacity: .8;
}
/* offer-info */
.offer-info {
  max-width: 76.8rem;
  padding: 3em 0 0;
  text-align: center;
  margin: auto;
}
.offer-info .offer-hd-text {
  font-weight: bold;
  font-size: 2.7rem;
  margin-bottom: 0.8em;
  white-space: nowrap;
}
.offer-info .offer-hd-text .txt-large {
  font-size:200%;
}
.offer-info .offer-hd-text .txt-medium {
  font-size:170%;
}
.offer-hd-text2{
  font-weight: bold;
  font-size: 1.6rem;
}

.offer-info .offer-img {
  display: block;
  margin-bottom: 1.5em;
}
.offer-info .offer-text {
  margin-bottom: 0;
  font-weight: 500;
  font-size: 2rem;
}
.offer-info .main-img {
  width: 100%;
  max-width: 55rem;
  margin: 4rem auto 0;
  padding-bottom: 3em;
}
/* term-info */
.term-info {
  padding: 2rem 3rem 5rem;
}
.term-info .term-ttl{
  margin-bottom: 0.6em;
  text-align: center;
  font-size: 2.2rem;
}
.term-info .term-period + .term-ttl {
  margin-top: 1.6em;
}
.term-info .term-detail {
  padding: 1.6em 1em;
  border-radius: 1.2em;
  text-align: center;
  background-color: #ecf1f7;
}
.term-detail .term-period {
  line-height: 1.3;
  font-weight: bold;
  font-size: 2.4rem;
  text-align: center;
}
.term-detail .comment {
  margin-top: 1.5em;
  text-align: left;
}



/* cp-detail */
.cp-detail {
  padding: 5rem 3rem;
  background-color: #ecf1f7;
}
.detail-block {
  padding: 3rem;
  border-radius: 2.5em;
  text-align: center;
  background-color: #fff;
}
.detail-block:not(:first-of-type) {
  margin-top: 3rem;
}
.detail-block-label{
  font-size: 1.6rem;
  display: block;
  margin-bottom: 1em;
}
.detail-block-label span{
  display: inline-block;
  color:#0077C2;
  border: 2px solid #0077C2;
  border-radius: 2em;
  padding: .4em 1em .3em;
  margin-bottom: 0;
  white-space: nowrap;
}
.detail-block .block-hd {
  position: relative;
  padding: 1em 0 .5em;
  overflow: hidden;
  font-weight: bold;
  font-size: 3.2rem;
}
.detail-block .block-hd h2 {
  position: relative;
  z-index: 2;
  margin-bottom: 1rem;
}
.detail-block .block-hd .thumb-item {
  margin: 1em auto 0
}
.point-detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.point-detail > div {
  position: relative;
  width: calc((100% - 1rem) / 2);
  background-color: #f5f5f5;
}
.point-detail > div:nth-child(n+3) {
  margin-top: 1rem;
}
.point-detail > div > dt {
  position: relative;
  z-index: 2;
  width: 25%;
  margin: -2.5em auto 0.8em;
}
.point-detail > div > dd {
  padding: 0 1.5em 2.5em;
}
.point-detail > div:nth-last-of-type(-n+2) > dd {
  padding-bottom: 2em;
}
.point-detail > div > dd img {
  width: 80%;
}
.point-text {
  margin-bottom: 0;
  font-weight: 500;
  font-size: 1.8rem;
}
.entry-btn {
  margin-bottom: 2em;
}
.entry-btn a{
  display: inline-block;
  width: 100%;
  max-width: 40rem;
  background-color: #E83534;
  color: #fff;
  text-align: center;
  border-radius: 0.7em;
  overflow: hidden;
  font-size: 2.4rem;
  font-weight: bold;
  padding: 0.7em 0.8em;
  box-shadow: 0 0.8rem 0 0 #AC131B;
}
.term-detail .term-btn a:hover{
  opacity: .8;
}


/* -----------------------------------------
ai-camera-box
------------------------------------------- */
.ai-camera-box{
  max-width: 76.8rem;
  text-align: center;
  margin: 0 auto 10rem;
  position: relative;
}
.chromebook .ai-camera-box{
  background: url('../img/ai-camera-bg-cb.jpg') center 0 no-repeat;
  background-size: contain;
  margin: 0 auto;
}
.ai-camera-box::before{
  content: "";
  display: block;
  padding-top: 66.6875%;
  top:0;
  border-radius: 3rem;
  overflow:hidden;
  background: url('../img/pixel-kv.webp') center 0 no-repeat;
  background-size: contain;
}
.ai-camera-ttl{
  display: block;
  font-size: 5.4rem;
  color: #474B4C;
  margin: 1em auto 0;
  line-height: 1.2;
}
.chromebook .ai-camera-ttl{
  line-height: 1.6;
}
.chromebook .ai-camera-ttl span{
  font-size: 85%;
  letter-spacing: .3em;
  background-color: #0077C2;
  color: #fff;
  padding: .35em 1em .3em 1.3em;
  text-shadow: none;
}
.ai-camera-ttl span.txt{
  display: inline-block;
  font-size: 85%;
  margin-bottom: 0.4em;
}
.ai-camera-ttl span.img{
  display: block;
}
.ai-camera-ttl span img{
  width: 60%;
}
.ai-camera-box p{
  color: #fff;
  position: absolute;
  font-size: 3.2rem;
  bottom: 23.3rem;
  left: 0;
  right: 0;
  margin: auto;
  text-shadow: rgba(0,0,0,.5) 1px 0 10px;
}
.wrap.cb-title{
  background-color: #0077C2;
  color: #fff;
  padding: 2em 0;
  margin-bottom: 6rem;
}
.cb-txt1{
  display: block;
  width:100%;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 2.8rem;
  text-align: left;
}
.cb-txt1 span{
  font-size: 150%;
  display: block;
  text-align: right;
}
.cb-txt2{
  font-size: 2.4rem;
  margin-bottom: 6rem;
}
.cb-txt2 span{
  display: inline-block;
  border:1px solid #999;
  border-radius: 5em;
  padding: .5em 1.5em;
}
.photo-box {
  text-align: center;
  margin-bottom: 8rem;
}

/* -----------------------------------------
共通
------------------------------------------- */
.h2-ttl{
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: #474B4C;
  margin-bottom: 0.9em;
  position: relative;
}
.h2-ttl img{
  width: 90%;
  max-width: 40rem;
}
.readtxt {
  margin-bottom: 2em;
  font-size: 2rem;
}
.opa0{
  opacity: 0;
}

/* -----------------------------------------
編集マジック
------------------------------------------- */
.magic-outer{
  position: relative;
  margin: 0 auto 3rem;
  max-width: 36rem;
  width: 80%;
  overflow: hidden;
  border-radius:2em;
}
.magic-outer::before{
  content: "";
  display: block;
  padding-top: 154.98%;
}
.magic-wrap{
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
}
.magic-wrap img {
  pointer-events: none;
}
.swipe-area {
  position: absolute;
  left: 0;
  right: 0;
  margin-left:auto;
  margin-right:auto;
  top: 20%;
  z-index: 10;
  width: 45%;
  height: 45%;
  cursor: pointer;
  /*background-color: rgba(255,0,0,0.3);*/
}
.swipe-anime{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.arrow{
  position: absolute;
  top: 27%;
  left: 45%;
  width: 10%;
  display: block;
  z-index: 2;
  overflow: hidden;
}
.arrow::before {
  content: '';
  display: block;
  padding-top: 198.63%;
}
.arrow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}
.icon{
  position: absolute;
  top: 32%;
  left: 51%;
  width: 13%;
  display: block;
  z-index: 3;
  transform: rotate(-45deg);
}
.swipetxt{
  width: 100%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%)!important;
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center;
  display: block;
  z-index: 3;
}
.img2_2{
  position: absolute;
  top: 47.5%;
  left: 32%;
  opacity: 1;
  width: 26.5%;
  display: block;
  z-index: 2;
}
.img3{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  display: block;
  z-index: 9;
}

/* tablet */
@media screen and (min-width:640px) {
.magic-outer{
  max-width: 36rem;
}
}

/* -----------------------------------------
CB video
------------------------------------------- */
.video-cb {
  position: relative;
  border-radius: 2em;
  overflow: hidden;
  width: 80%;
  margin: auto;
}
.video-cb:before {
  content: '';
  display: block;
  padding-top: 66.666%;
}
.video-cb video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* -----------------------------------------
Best Take
------------------------------------------- */
.video-block {
  width: 90%;
  max-width: 28rem;
  margin: 0 auto;
}
.video-block .video-view {
  position: relative;
  border-radius: 2em;
  overflow: hidden;
}
.video-block .video-view::before {
  content: '';
  display: block;
  padding-top: 222%;
}
.video-block .video-view video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.start-btn{
  display: block;
  position: absolute;
  z-index: 10;
  top: 48%;
  left: 50%;
  width: 30%;
  transform: translate(-50%,-50%) !important;
}


/* -----------------------------------------
shop-box
------------------------------------------- */
.circle-search.iframe{
  padding: 0;
}
.logo-kakote{
  width: 80%;
  max-width: 34rem;
}
/* tablet */
@media screen and (min-width:640px) {
.logo-kakote{
  margin-top: 1.5rem;
}
}
/* iframeレスポンシブ設定 */
.iframWrap{
  text-align: center;
  overflow: hidden;
  width: 100%;
  height: 740px;
}
.iframWrap iframe{
  overflow: hidden;
  border: none;
  width: 376px;
  height: 740px;
}
@media screen and (max-width: 500px){
  .iframWrap{ height: 660px; }
  .iframWrap iframe{
    transform: scale(0.9);
    transform-origin: center 0;
  }
}
@media screen and (max-width: 400px){
  .iframWrap{ height: 590px; }
  .iframWrap iframe{ transform: scale(0.8); }
}
@media screen and (max-width: 375px){
  .iframWrap{ height: 520px; }
  .iframWrap iframe{ 
    transform: scale(0.7);
    margin-left: calc((100% - 376px)/2);
  }
}

/* -----------------------------------------
shop-box
------------------------------------------- */
.shop-box {
  text-align: center;
  margin-bottom: 12rem;
}
.shop-box.mb20{
  margin-bottom: 2rem;
}
.foot-logo{
  width: 55%;
  margin: 0 auto;
}
.shop-ttl {
  font-size: 4rem;
  font-weight: bold;
  color: #666;
  margin-bottom: 3rem;
}
.shop-box ul{
  display: flex;
  justify-content: center;
}

.shop-box ul li{
  width: calc((100% - 4rem) / 2);
  margin: 0 1rem;
  display: block;
}

.ft-link{ border-top: 1px solid #333; padding: 1.5em; }
.ft-link{ display: flex; justify-content: center; }
.ft-link li+li{ margin-left: 1.5em; }
.ft-link a{ color: #333 !important; }
footer{
  background: #000;
  color: #fff;
  text-align: center;
  padding: 2em 0;
  font-size: 1.4rem;
}
footer a{
  color: #fff !important;
}
footer a+a{ margin-left: 1em; }
footer .copyright{ display: flex; justify-content: center; line-height: 1; }
footer .copyright span+span{ margin-left: .3em; }
.cpr{ font-size: 2.1rem;  }


.banner{
  margin: 8rem 0 8rem;
  display: block;
}
.banner a{ 
  display:block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  max-width: 75rem;
  margin: auto;
}
.banner a img{
  display: block;
  width: 100%;
}

/* -----------------------------------------
 ページトップ
------------------------------------------- */
/* ページトップ */
#pagetop {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: #000;
  cursor: pointer;
  z-index: 99;
}
#pagetop:before {
  content: "";
  position: absolute;
  top: 14%;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.2rem;
  border-color: transparent transparent #fff transparent;
}
#pagetop:after {
  content: "";
  position: absolute;
  top: 18%;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.2rem;
  border-color: transparent transparent #000 transparent;
}
#pagetop:hover {
  opacity: .8;
  transition: .3s ease-out;
}
.products-main{
  margin-top: 5rem;
}
/* -----------------------------------------
 レスポンシブ
------------------------------------------- */
/* tablet size */
@media screen and (max-width: 768px) {
  .pc-only:not(.tab) {
    display: none;
  }
  .sp-only.tab {
    display: inline-block;
  }
  header, body {
    min-width: auto;
  }
  a:hover img, a:hover {
    opacity: 1;
  }
  .wrap,
  .wrap-full{
    padding: 0 3rem;
  }
  .head-box .wrap {
    padding: 0;
  }
  .offer-info .offer-hd-text {
    font-size: 3.2vw;
  }
  .offer-hd-text2{
    font-size: 1.6rem;
  }
  .products-main{
    margin-top: 1.5rem;
  }
  .ai-camera-box{
    margin: 0 auto 4rem;
    max-width: inherit;
  }
  .chromebook .ai-camera-box{
    max-width: inherit;
  }
  
  .apply-btn a{
    width: 100%;
    font-size: 3vw;
    padding: 1.5vw 0;
  }
  .ai-camera-ttl{
    margin-top: .8em;
    font-size: 7vw;
  }
  .menu-box ul li a span {
    transform: scaleX(0.8);
    transform: scale(0.8, 0.9);
  }
  .cp-detail .wrap {
    padding: 0;
  }
  .point-detail > div > dd img {
    width: 90%;
  }
  .point-text {
    font-size: 1.6rem;
  }
  .h2-ttl{
    font-size: 3rem;
  }
  .term-period .sp-only {
    display: block;
  }
  .cb-txt1{
    max-width: 32rem;
    font-size: 2.1rem;
  }
  .cb-txt2{
    font-size: 2.1rem;
    margin-bottom: 6rem;
  }
}
@media screen and (max-width: 599px) {
  .wrap {
    padding: 0 1.5rem;
  }
  .hide-pc{ display: block; }
  .hide-sp,
  .pc-only, .pc-only:not(.tab) {
    display: none;
  }
  .logo{
    margin-bottom: 0;
  }
  .sp-only {
    display: block;
  }
  .apply a{
    width: 90%;
  }
  .readtxt{
    font-size:4vw;
    font-size: clamp(1.4rem, 4vw, 1.6rem); 
  }
  .head-ttl{
    font-size: 2.8rem;
  }
  .head-ttl2{
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 1rem;
  }
  .h2-ttl{
    font-size: 2.8rem;
  }
  .term-ttl{
    font-size: 2.0rem;
  }
  .term-box{
    width: 100%;
  }
  .head-ttl sup{
    top: 0.5em;
  }
  .term { display: block; }
  .term li{ width: 100%; margin-bottom: 1em; }
  .term li{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .apply-btn {
    bottom: 6vw;
  }
  .apply-btn a{
    width: 100%;
    font-size: 5vw;
    padding: 2.8vw 0;
  }
  .term .txt br{ display:none; }
  .ai-camera-box{
    padding: 1rem 1.5rem;
  }
  .photo-box {
    margin-bottom: 6rem;
  }
  .foot-logo{
    width: 65%;
    margin: 0 auto;
  }
  .shop-ttl {
    font-size: 3rem;
  }
  .shop-box {
    margin-bottom: 8rem;
  }
  .shop-box ul{
    display: block;  
  }
  .shop-box ul li{
    width: 85%;
    margin: 0 auto 1.5rem;
    display: block;
  }
  .head-box {
    position: relative;
  }
  .banner{
    margin: 4rem 0 4rem;
    display: block;
  }
  /* ページトップ */
  #pagetop {
    right: 1rem;
    bottom: 1rem;
    width: 4rem;
    height: 4rem;
  }
  #pagetop.bottom {
    position: absolute;
    bottom: 8rem;
  }
  #pagetop:before {
    top: 10%;
    border-width: 1rem;
  }
  #pagetop:after {
    top: 15%;
    border-width: 1rem;
  }
  #pagetop:hover {
    opacity: 1;
  }
  .head-sb{
    font-size: 2.2rem;
    padding: .8em 0;
  }
  .wrap-full{
    padding: 0;
    margin-bottom: 1rem;
  }
  /* offer-info */
  .plus{ margin:0; }
  .offer-info {
    padding: 2rem 1.5rem 0;
  }
  .offer-info .offer-hd-text {
    font-size: 3.8vw;
  }
  .offer-info .offer-hd-text .txt-large{
    font-size: 180%;
  }
  .offer-info .offer-hd-text .txt-medium{
    font-size: 150%;
  }
  .offer-info .offer-img {
    margin-bottom: 1em;
  }
  .offer-info .offer-text {
    margin-bottom: 1em;
    font-size: 1.6rem;
  }
  .offer-info .main-img {
    width: 85%;
    margin: 3rem auto 0;
    padding-bottom:1em;
  }
  /* term-info */
  .term-info {
    padding: 1rem 1.5rem 3rem;
  }
  .term-info .term-ttl {
    margin-bottom: 0.6em;
    font-size: 1.6rem;
  }
  .term-info .term-period + .term-ttl {
    margin-top: 1.4em;
  }
  .term-info .term-detail {
    padding: 1.2em 0.6em 1.1em;
  }
  .term-detail .term-period {
    font-size: 1.8rem;
  }
  .term-detail .term-btn {
    margin-bottom: 0;
  }
  .term-detail .term-btn a{
    max-width: 14em;
    font-size: 5vw;
    padding: 2.8vw 0;
  }
  .term-detail .term-btn a:hover{
    opacity: 1;
  }
  .cp-detail {
    padding: 3rem 1.5rem;
  }
  .detail-block {
    padding: 3rem 1.5rem;
    border-radius: 1.5em;
  }
  .detail-block:not(:first-of-type) {
    margin-top: 1.5rem;
  }
  .detail-block .block-hd {
    font-size: 2.4rem;
    padding: 0 0 .5em;
    line-height: 1.2;
  }
  .detail-block .block-hd .thumb-item {
    width: 100%;
    margin: .5em auto 0;
  }
  .point-detail {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }
  .point-detail > div {
    width: calc((100% - 0.5rem) / 2);
  }
  .point-detail > div:nth-child(n+3) {
    margin-top: 0.5rem;
  }
  .point-detail > div > dt {
    width: 36%;
    margin: -1.8em auto 0.8em;
  }
  .point-detail > div > dd {
    padding: 0 0.7em 2.5em;
  }
  .point-detail > div:nth-last-of-type(-n+2) > dd {
    padding-bottom: 2em;
  }
  .point-detail > div > dd img {
    width: 100%;
  }
  .point-text {
    font-size: 1.4rem;
  }
  .entry-btn {
    margin-bottom: 1.25em;
  }
  .entry-btn a{
    max-width: 15em;
    font-size: 5vw;
    padding: 3.4vw 0;
  }
  .entry-btn a:hover{
    opacity: 1;
  }
  .addme {
    width: 100%;
  }
  .start-btn {
    width: 33%;
  }
  .video-cb {
    width: 100%;
  }
  .products-list li{
    width: 48%;
  }
  .products-list li a p{
    font-size: 1.6rem;
  }
  .products-list li.phone a p{
    margin-top:1em;
  }
  .products-index .wrap {
    padding: 3rem 2rem 4rem;
  }
  .products-list li a.current {
    box-shadow: 0 1rem 0 #0077C2, 0 0.5rem 1rem rgba(0, 0, 0, 0.32);
  }
  .products-list li a.current::before {
    bottom: -3rem;
    border-width: 3rem 3rem 0;
    border-color: #0077C2 transparent transparent transparent;
  }
}
@media screen and (max-width: 390px) {
  html {
    font-size: calc(100vw/39);
  }
}

@media (orientation: landscape) {
}

/* フェードイン */
.fade-in {
  opacity: 0;
}
.fade-in.active {
  animation: fadeIn .8s ease-out forwards;
}
@keyframes fadeIn {
 0% {
opacity: 0;
}
 100% {
opacity: 1;
}
}
/* フェードイン・アップ */
.fade-in-up {
  opacity: 0;
}
.fade-in-up.active {
  animation: fadeInUp .8s ease-out forwards;
}
@keyframes fadeInUp {
 0% {
transform: translate3d(0, 5rem, 0);
opacity: 0;
}
 100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
/* フェードイン・ライト */
.fade-in-right {
  opacity: 0;
}
.fade-in-right.active {
  animation: fadeInRight .8s ease-out forwards;
}
@keyframes fadeInRight {
 0% {
transform: translate3d(5rem, 0, 0);
opacity: 0;
}
 100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
/* フェードイン・レフト */
.fade-in-left {
  opacity: 0;
}
.fade-in-left.active {
  animation: fadeInLeft .8s ease-out forwards;
}
@keyframes fadeInLeft {
 0% {
transform: translate3d(-5rem, 0, 0);
opacity: 0;
}
 100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
/* フェードイン ボトム */
.fade-in-down {
  opacity: 0;
}
.fade-in-down.active {
  animation: fadeInDown .8s ease-out forwards;
}
@keyframes fadeInDown {
 0% {
transform: translate3d(0, -5rem, 0);
opacity: 0;
}
 100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
/* ズームイン */
.zoom-in {
  opacity: 0;
}
.zoom-in.active {
  animation: zoomIn .8s ease-out forwards;
}
@keyframes zoomIn {
 0% {
transform:scale3d(1.2,1.2,1.2);
opacity: 0;
}
 100% {
transform:scale3d(1,1,1);
opacity: 1;
}
}
/* フェードイン・レフト */
.wide-left {
  opacity: 0;
}
.wide-left.active {
  animation: wideLeft .8s ease-out forwards;
}
@keyframes wideLeft {
 0% {
width: 0;
opacity: 0;
}
 100% {
width: 100%;
opacity: 1;
}
}


.device-ttl{
  text-align: center;
  font-size: 2.8rem;
  margin-bottom:1.5em;
}
.release-date{
  margin-bottom: 3rem;
  display: flex;
  justify-content:center;
  align-items: center;
  width: 100%;
}
.release-date li{
  margin-bottom: 1rem;
  font-size: 1.6rem;
  white-space: nowrap;
  text-align: center;
  line-height: 1.3;
  width: 42%;
}
.offre-item{
  width: 90%;
  max-width: 57rem;
  margin: 0 auto 4rem;
}
.icon_gemini{
  width: 6rem;
  margin: 0 auto 3rem;
}
.gemini_1, .gemini_2, .gemini_3, .processor_img, .battery_img, .addme_img, .besttake_img, .update_img{
  width: 90%;
  max-width: 57rem;
  margin: 0 auto 3rem;
}
@media screen and (max-width: 768px) {
  .device-ttl{
    text-align: center;
    font-size: 2.1rem;
    margin-bottom:1em;
  }
  .release-date{
    margin-bottom: 1.5rem;
  }
  .release-date li br{ display: block; }
  .release-date li+li{
    margin-left: .5em;
  }
}
@media screen and (max-width: 599px) {
  .release-date li{
    font-size:1.3rem;
  }
}

/* -----------------------------------------
ポイント連携
------------------------------------------- */
.linking-detail{
  text-align: center;
  margin: 0 auto;
  padding: 5rem 3rem;
  background-color: #ddeafe;
}
.linking-ttl{
  margin-bottom: 2rem;
}
.linkage-btn a{
  display: inline-block;
  width: 100%;
  max-width: 40rem;
  background-color: #7099d5;
  color: #fff;
  text-align: center;
  border-radius: 0.7em;
  overflow: hidden;
  font-size: 2.4rem;
  font-weight: bold;
  padding: 0.7em 0.8em;
  box-shadow: 0 0.8rem 0 0 #2563BF;
}
.linking-detail .term-period {
  line-height: 1.3;
  font-weight: 500;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 3.5rem;
}
.linking-detail .term-period span{
  display: inline-block;
  padding-top: 3rem;
  font-size: 2.4rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .linking-detail .wrap {
      padding: 0;
  }
}  
@media screen and (max-width: 599px) {
  .linking-ttl{
  margin-bottom: 1.3rem;
}
  .linking-detail{
    padding: 3rem 1.5rem;
  }
  .linkage-btn a {
    max-width: 15em;
    font-size: 5vw;
    padding: 3.4vw 0;
    }
  .linking-detail .term-period {
    font-size: 1.4rem;
    margin-bottom: 2.2rem;
  }
  .linking-detail .term-period span{
    padding-top: 2rem;
    font-size: 1.8rem;
  }
}