/* 
◆目次※TOPのフッター基準で分類◆
  基盤
  ヘッダーナビ
  フッター
  ダウンロードはこちら
  TOPページ
  商品ページ
  利用シーン
  コラボテンプレート
  オススメ機能
  ガイド(+出荷予定日検索)
  作品集
  その他パーツ類
*/
@charset "UTF-8";

/* 基盤 */
meta.foundation-mq-small {
  font-family: "/only screen/";
  width: 0em; }
meta.foundation-mq-medium {
  font-family: "/only screen and (min-width:40.063em)/";
  width: 40.063em; }
meta.foundation-mq-large {
  font-family: "/only screen and (min-width:64.063em)/";
  width: 64.063em; }
meta.foundation-mq-xlarge {
  font-family: "/only screen and (min-width:90.063em)/";
  width: 90.063em; }
meta.foundation-mq-xxlarge {
  font-family: "/only screen and (min-width:120.063em)/";
  width: 120.063em; }
meta.foundation-data-attribute-namespace {
  font-family: false; }
html, body {
  height: 100%; }
*,
*:before,
*:after {
  box-sizing: border-box; }
html{
  font-size: 100%; }
img {
  max-width: 100%;
  height: auto; 
  -ms-interpolation-mode: bicubic; 
  display: inline-block;
  vertical-align: middle; }
.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 67.5rem; }
.row:before, .row:after {
  content: " ";
  display: table; }
.row:after {
  clear: both; }
.row .row {
  width: auto;
  margin-left: -0.9375rem;
  margin-right: -0.9375rem;
  margin-top: 0;
  margin-bottom: 0;
  max-width: none;}
.row .row:before, .row .row:after {
  content: " ";
  display: table;}
.column,
.columns {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  width: 100%;
  position: relative;
  float: left; }
[class*="column"] + [class*="column"]:last-child {
  float: left; }
[class*="column"] + [class*="column"].end {
  float: left; }
.small-2 {width: 16.6666666667%;}
.small-6 {width: 50%; }
.small-10 {width: 83.3333333333%;}
.small-12 {width: 100%; }
.small-offset-1 {margin-left: 8.3333333333% !important;}
@media only screen and (min-width: 40.063em) {
  .medium-1 {width: 8.3333333333%;}
  .medium-3 {width: 25%;}
  .medium-4 {width: 33.3333333333%;}
  .medium-5 {width: 41.6666666667%;}
  .medium-6 {width: 50%;}
  .medium-8 {width: 66.6666666667%;}
  .medium-12 {width: 100%;}
  .medium-offset-0 {margin-left: 0% !important;}}
@media only screen and (min-width: 64.063em) {
  .large-3{width: 25%;}
  .large-4 {width: 33.3333333333%;}
  .large-6 {width: 50%;}
  .large-9 {width: 75%;}}
button, .button {
  border-style: solid;
  border-width: 0px;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: normal;
  line-height: normal;
  margin: 0 0 1.25rem;
  position: relative;
  text-decoration: none;
  text-align: center;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  display: inline-block;
  padding-top: 1rem;
  padding-right: 2rem;
  padding-bottom: 1.0625rem;
  padding-left: 2rem;
  font-size: 1rem;
  background-color: #008CBA;
  border-color: #007095;
  color: #FFFFFF;
  transition: background-color 300ms ease-out; }
  @media only screen and (min-width: 40.063em) {
  button, .button {
    display: inline-block; } }
label {
  font-size: 0.875rem;
  color: #4d4d4d;
  cursor: pointer;
  display: block;
  font-weight: normal;
  line-height: 1.5;
  margin-bottom: 0;}
input[type="file"],
input[type="checkbox"],
input[type="radio"],
select {
  margin: 0 0 1rem 0; }
input[type="checkbox"] + label,
input[type="radio"] + label {
  display: inline-block;
  margin-left: 0.5rem;
  margin-right: 1rem;
  margin-bottom: 0;
  vertical-align: baseline; }
table {
  background: #FFFFFF, 0;
  margin-bottom: 1.25rem;
  border: solid 0px #DDDDDD;
  table-layout: auto; }
table caption {
  background: transparent;
  color: #50646E;
  font-size: 1rem;
  font-weight: bold; }
table tr th,
  table tr td {
    padding: 0.5625rem 0.625rem;
    font-size: 0.875rem;
    color: #50646E;
    text-align: left; }
table tr.even, table tr.alt, table tr:nth-of-type(even) {
    background: #000000, #FFFFFF; }
table thead tr th,
  table tfoot tr th,
  table tfoot tr td,
  table tbody tr th,
  table tbody tr td,
  table tr td {
    display: table-cell;
    line-height: 1.125rem; }
meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:40.063em)/";
  width: 40.063em; }
.text-left {
  text-align: left !important; }
.text-right {
  text-align: right !important; }
.text-center {
  text-align: center !important; }
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0; }
a img {
  border: none;
  outline:none;}
/* Default paragraph styles */
p {
  font-family: inherit;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  text-rendering: optimizeLegibility;
  line-break: strict;}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-style: normal;
  color: #50646E;
  text-rendering: optimizeLegibility;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  line-height: 1.4; }
h1 {font-size: 2.125rem;}
h2 {font-size: 1.6875rem;}
h3 {font-size: 1.375rem;}
h4, h5{font-size: 1.125rem;}
h6 {font-size: 1rem;}
@media only screen and (min-width: 40.063em) {
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.4; }
  h1 {font-size: 2.75rem;}
  h2 {font-size: 2.3125rem;}
  h3 {font-size: 1.6875rem;}
  h4 {font-size: 1.4375rem;}}
em,
i {
  font-style: italic;
  line-height: inherit; }
strong,
b {
  font-weight: bold;
  line-height: inherit; }
ul,
ol,
dl {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  list-style-position: outside;
  font-family: inherit; }
ul {
  margin-left: 1.1rem; }
ol {
  margin-left: 1.4rem;}
* {
  margin: 0;
  padding: 0;}
a {
  color: #10AF9E;
  text-decoration: none;
  line-height: inherit;
  transition : all 0.2s ease 0s;
  outline:none;  }
a:hover, a:focus {
  color: #70CFC5; }
body {
  /* プロポーショナルメトリクスを有効にする(自動カーニング機能ON) */
  -webkit-font-feature-settings: "palt" 1;
     -moz-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1; 
  background: #FFFFFF;
  color: #50646E;
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-family:'Noto Sans JP', "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif !important;
  font-size: 100%;         
  font-weight: normal;
  font-style: normal;
  line-height:1;
  position: relative;
  cursor: auto;}
div.contents_row {
  background-color: #FFFFFF;
  position: relative;
  padding-bottom: 1em;
  padding-top: 1em;}
div.contents_row .row .columns {
  margin-right: 0px;
  margin-left: 0px; }
div.contents_row .scene_column .columns {
  margin-right: 0px;
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px; }
div.contents_row .scene_column .columns div {
    cursor: pointer; }
div.contents_row:nth-child(2n+1) {
    background-color: #F5F5F5;}
.no-margin {
  margin: 0px !important;
  padding: 0px !important; }
.emph-line {
  background: linear-gradient(transparent 60%, #ffff66 60%); }
/* spだけできく改行 */
@media only screen and (min-width: 40.063em) {
  .br-sp-only {
    display: none; } }
/* tb,spだけできく改行 */
@media only screen and (min-width: 64.063em) {
  .br-sp {
    display: none; } }
/* pc,tbだけできく改行 */
@media only screen and (max-width: 40em) {
  .br-pc {
    display: none; } }
.Pcbr {
    display: none;}
@media only screen and (min-width: 64.063em) {
.Pcbr {display: block;}}
hr {
  border: solid #DDDDDD;
  border-width: 1px 0 0;
  clear: both;
  margin: 1.25rem 0 1.1875rem;
  height: 0;}
/* ヘッダー食い込み防止 */
.row.topMargin {
  margin-top: 90px;}
div.contents_normal div.contents_head {
  margin-top: 84px;
  margin-bottom: 2em;
  background-color: transparent;}
@media only screen and (min-width: 64.063em) {
  .top-text2 {padding-top: 104px !important;}
  .row.topMargin {margin-top: 35px;}}
@media only screen and (min-width: 64.063em) {
  div.contents_normal div.contents_head {
    margin-top: 104px;}}
/* ページ基本設定 */
.Pages {margin-top: 45px;}
  @media only screen and (min-width: 40.063em) {
    .Pages {margin-top: 64px;}}
  @media only screen and (min-width: 64.063em) {
    .Pages {margin-top: 106px;}}
p.topbanner{
  margin-bottom: 2rem;}
div.mainContents{
  padding:0 0.9375rem;}
.Pages a :not(a.dlBtnGreen):not(div.dlBtn):not(i.fas):not(i.fa-download){
  color: #10AF9E;
  text-decoration: underline;
  line-height: inherit;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all  0.1s ease;}
.Pages a :hover:not(a.dlBtnGreen:hover):not(i.fas):not(i.fa-download){
  color: #70CFC5;
  text-decoration: none;}
.PageHeader{
  padding-top: 1em;}
  @media only screen and (min-width: 40.063em) {
    .PageHeader {padding-top: 0;}}
  @media only screen and (min-width: 40.063em) {
    div.row div.mainContents section.toplead2 h3 {
      text-align: center;
      margin-bottom: 0;
      font-size: 1.3rem;}}
  @media only screen and (min-width: 40.063em) {
    div.row div.mainContents section.toplead2 p {
      text-align: center;}}
  @media only screen and (min-width: 40.063em) {
    div.row div.mainContents section.toplead2 div.samplebook {
      text-align: center;}}
div.Pages .mainContents p.imagespec {
  background: #F2F5FA;
  margin: 1rem 0 1rem 0;
  padding: 1.5rem;
  font-weight: bold;}
div.Pages h1{
  margin-bottom: 1.5rem;
  margin-top: 0;
  padding-left: 0.9375rem;
  font-size: 2rem;}
  @media only screen and (min-width: 40.063em) {
    div.Pages h1{
      margin-bottom: 2rem;
      margin-top: 2rem;
      font-size: 2.75rem;}}
div.Pages h2{
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  margin-top: 1.3rem;
  text-align: center;
  font-weight: bold;
  line-height: 1.6;}
  @media only screen and (min-width: 40.063em) {
    div.Pages h2{
      font-size: 1.4375rem;
      margin-bottom: 2rem;
      margin-top:2rem;}
    br.spBr{display: none;}}
  @media only screen and (min-width: 64.063em) {
    div.Pages h2 {
      font-size: 1.6rem;
      margin-bottom: 3rem;
      margin-top: 3.5rem;
      line-height: 1.7;}}
div.Pages .mainContents p {
  margin-bottom: 0;}
  @media only screen and (min-width: 40.063em) {
    .itemDescription {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 1rem;}
    .PagesItem{
        width:48%;}}
.Pages span.emph-line {
  font-weight: bold;}
div.Pages .attention {
  color: #dd641d;
  font-weight: bold;}
div.Pages i {
  font-weight: bold;
  padding-right: 0.2em;
  font-size: 0.9em;}
div.Pages i:hover{
  opacity: 70;}
div.Pages ul li {
  list-style: none;}
div.Pages ul{
  margin-bottom: 0;
  margin-left: 0;}
div.Pages .mainContents section.toplead p{
  margin-bottom: 0.5rem;}
div.Pages .PageHeader p.h1Lead{
  padding: 0 0.9375rem;}
section.toplead p:last-of-type{
  margin-top: 1rem;}
section.toplead{
  margin-bottom: 2.5rem;}
  @media only screen and (min-width: 40.063em) {
    section.toplead {
      width: 51.75rem;
      margin: 0 auto 2.5rem;}}
div.Pages h3{
  margin-top:1.2rem;
  margin-bottom: 0.6rem;
  font-size: 1.125rem;
  font-weight: bold;}
/* 入力フォーム */
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background-color: #FFFFFF;
  font-family: inherit;
  border-style: solid;
  border-width: 1px;
  border-color: #cccccc;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.75);
  display: block;
  font-size: 0.875rem;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
  height: 2.3125rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow 0.45s, border-color 0.45s ease-in-out;}
/* 基盤おわり */






/* ヘッダーナビ */
nav {
  box-shadow: 0em 0.2em 0.2em transparent;
  background-color: #FFFFFF; }
div.wrapper.headernav div,
div.wrapper.headernav span,
div.wrapper.headernav object,
div.wrapper.headernav iframe,
div.wrapper.headernav h1,
div.wrapper.headernav h2,
div.wrapper.headernav h3,
div.wrapper.headernav h4,
div.wrapper.headernav h5,
div.wrapper.headernav h6,
div.wrapper.headernav p,
div.wrapper.headernav blockquote,
div.wrapper.headernav pre,
div.wrapper.headernav abbr,
div.wrapper.headernav address,
div.wrapper.headernav cite,
div.wrapper.headernav code,
div.wrapper.headernav del,
div.wrapper.headernav dfn,
div.wrapper.headernav em,
div.wrapper.headernav img,
div.wrapper.headernav ins,
div.wrapper.headernav kbd,
div.wrapper.headernav q,
div.wrapper.headernav samp,
div.wrapper.headernav small,
div.wrapper.headernav strong,
div.wrapper.headernav sub,
div.wrapper.headernav sup,
div.wrapper.headernav var,
div.wrapper.headernav b,
div.wrapper.headernav i,
div.wrapper.headernav dl,
div.wrapper.headernav dt,
div.wrapper.headernav dd,
div.wrapper.headernav ol,
div.wrapper.headernav ul,
div.wrapper.headernav li,
div.wrapper.headernav fieldset,
div.wrapper.headernav form,
div.wrapper.headernav label,
div.wrapper.headernav legend,
div.wrapper.headernav table,
div.wrapper.headernav caption,
div.wrapper.headernav tbody,
div.wrapper.headernav tfoot,
div.wrapper.headernav thead,
div.wrapper.headernav tr,
div.wrapper.headernav th,
div.wrapper.headernav td,
div.wrapper.headernav article,
div.wrapper.headernav aside,
div.wrapper.headernav canvas,
div.wrapper.headernav details,
div.wrapper.headernav figcaption,
div.wrapper.headernav figure,
div.wrapper.headernav footer,
div.wrapper.headernav header,
div.wrapper.headernav hgroup,
div.wrapper.headernav menu,
div.wrapper.headernav nav,
div.wrapper.headernav section,
div.wrapper.headernav summary,
div.wrapper.headernav time,
div.wrapper.headernav mark,
div.wrapper.headernav audio,
div.wrapper.headernav video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;}
div.wrapper.headernav article,
div.wrapper.headernav aside,
div.wrapper.headernav details,
div.wrapper.headernav figcaption,
div.wrapper.headernav figure,
div.wrapper.headernav footer,
div.wrapper.headernav header,
div.wrapper.headernav hgroup,
div.wrapper.headernav menu,
div.wrapper.headernav nav,
div.wrapper.headernav section {
  display:block;}
div.wrapper.headernav a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  text-decoration: none;
  color:inherit;
  display: inline-block;}
div.wrapper.headernav a.icon-mail {font-size:1rem;}
  @media only screen and (min-width: 40.063em) {
  div.wrapper.headernav a.icon-mail {font-size: 1.2rem;}} 
div.wrapper.headernav input, select {
  vertical-align:middle;}
div.wrapper.headernav *,
div.wrapper.headernav *::before,
div.wrapper.headernav *::after {
  box-sizing: border-box;}
div.wrapper.headernav {
  line-break: strict !important;
  font-family:'Roboto','Noto Sans JP', "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  color: #333;
  font-size: 1.6rem !important;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'magsinc' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}
.icon-truck:before {content: "\e900";}
.icon-language:before {content: "\e902";}
.icon-mail:before {content: "\e903";}
#navTgl {
	display: none;}
label#sp-icon {
	cursor: pointer;
	position: fixed;
	top: 0;
	right: 0;}
label#sp-icon.open {
	z-index: 2;
	width: 45px;
	height: 45px;
	background: #10AF9E;
	transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);}
  @media only screen and (min-width: 40.063em){
    label#sp-icon.open {
      width: 64px;
      height: 64px;}}
  @media only screen and (min-width: 64.063em) {
    label#sp-icon.open {display: none;}}
label#sp-icon.open::before,
label#sp-icon.open::after {
	content: "";}
label#sp-icon.open span,
label#sp-icon.open::before,
label#sp-icon.open::after {
	content: "";
	position: absolute;
	top: calc(50% - 2px);
	left: 30%;
	width: 40%;
	border-bottom: 2px solid white;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);}
  @media only screen and (min-width: 40.063em){
    label#sp-icon.open span,
    label#sp-icon.open::before,
    label#sp-icon.open::after {
      position: absolute;
      top: calc(50% - 1px);
      left: 32.5%;
      width: 35%;}}
label#sp-icon.open::before {
	transform: translateY(-5px);}
  @media only screen and (min-width: 40.063em){
    label#sp-icon.open::before {
      transform: translateY(-7px);}}
label#sp-icon.open::after {
	transform: translateY(5px);}
    @media only screen and (min-width: 40.063em){
    label#sp-icon.open::after {
      transform: translateY(7px);}}
#navTgl:checked + .open span {
	transform: scaleX(0);}
#navTgl:checked + .open::before {
	transform: rotate(45deg);}
#navTgl:checked + .open::after {
	transform: rotate(-45deg);}
#navTgl:checked ~ .menu {
	display: block;}
#toggleMenu .menu {
	list-style-type: none;
	width: 100%;
	background: #ffffff;
	position: absolute;
	left: 0px;
	top: 46px;
	z-index: 990;
	display: none;}
  @media only screen and (min-width: 40.063em){
    #toggleMenu .menu {top: 65px;}}
  @media only screen and (min-width: 64.063em) {
  #toggleMenu .menu{
    top: 64px;
    z-index: 1;
    border-top: #DDDDDD solid 1px;
    border-bottom: #DDDDDD solid 1px;
    opacity: 1;
    visibility: visible;
    display: block;
    height: auto;}}
@media only screen and (min-width: 64.063em) {
#toggleMenu .menu{
  list-style-type: none;
  width: 100%;
  background: #fff;
  position: absolute;
  left: 0px;
  top: 64px;
  z-index: 1;
  border-top: #DDDDDD solid 1px;
  border-bottom: #DDDDDD solid 1px;
  opacity: 1;
  visibility: visible;
  display: block;
  height: auto;}
#toggleMenu .menu ul {
  text-align: right;
  padding-right: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 40px;}
#toggleMenu .menu ul li {
  font-size: 0.75rem;
  background: none;
  border: none;
  color: #10AF9E;
  display: inline-block;
  text-align: center;
  vertical-align: text-top;
  padding: 8px 0 8px 0;}
#toggleMenu .menu ul li a {
  position: relative;
  display: inline-block;
  transition: background-color 0.2s;
  padding: 2px 15px 2px 15px;}
#toggleMenu .menu ul li a:hover{
  color:#fff;
  background: #10AF9E;
  border-radius: 3px;}
#toggleMenu .menu ul li a:before {
  position: static;
  top: 0;
  left: 0;
  content: '\f054';
  font-size: 0.75rem;
  font-family: Font Awesome\ 5 Free;
  z-index: 1;
  text-align: left;
  margin-right: 3px;}}
#toggleMenu .menu li {
	text-align: left;
  font-size: 0.9rem;
  background: #10AF9E;
	border-bottom: solid #fff 1px;
	color: #fff;
	font-weight: bold;
  line-height: normal;}
#toggleMenu .menu li a {
	text-decoration: none;
	display: block;
	padding: 17px 20px;}
#toggleMenu .menu li a:hover {
	background: #40BFB1;
  	cursor: pointer;}
#toggleMenu .menu li a:before {
	position: absolute;
	right: 8%;
	content: '\f054';
	font-size: 0.9rem;
	font-family: Font Awesome\ 5 Free;
	z-index: 1;}
input#navTgl:checked~.switch-presentation {
  height: 5000px;
  width: 100%;
  background: rgba(255,255,255,0.9);
  margin-top: 10px;}
#navTgl2 {
	display: none;}
label#sp-icon2 {
	cursor: pointer;
	position: fixed;
	top: 0;
	right: 92px;}
label#sp-icon2.open2 {
	z-index: 2;
	width: 45px;
	height: 45px;
	background: #F2F5FA;
	transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);}
  @media only screen and (min-width: 40.063em){
    label#sp-icon2.open2 {
      width: 64px;
      height: 64px;
      position: fixed;
      top: 0;
      right: 130px;}}
  @media only screen and (min-width: 64.063em) {
    label#sp-icon2.open2 {
        right: 65px;}}
label#sp-icon2 span.icon-language{
	display: block;
	text-align: center;
	line-height: 45px;
	color:#10AF9E;
  font-size: 1rem;}
  @media only screen and (min-width: 40.063em){
    label#sp-icon2 span.icon-language{
      line-height: 64px;
      font-size: 1.2rem;}}
#navTgl2:checked ~ .mod_dropnavi_child {
	display: block;}
label#sp-icon2 span.icon-language:hover {
	background: #10AF9E;
	color: #fff;
  transition: background-color 0.2s;}
label#sp-icon2 span.icon-language:active {
	background: #10AF9E;
	color: #fff;}
#mod_dropnavi .mod_dropnavi_child{
  display:none;
  position:absolute;
  top:46px;
  right:92px;
  z-index:99;}
  @media only screen and (min-width: 40.063em){
    #mod_dropnavi .mod_dropnavi_child {
      top: 65px;
      right: 130px;}}
  @media only screen and (min-width: 64.063em) {
    #mod_dropnavi .mod_dropnavi_child {
      right: 65px;}}
#mod_dropnavi .mod_dropnavi_child ul{
  list-style: none !important;}
#mod_dropnavi .mod_dropnavi_child ul li{
	font-size: 0.75rem;
	line-height: 1.3;
  text-align:left;
  white-space:nowrap;
  font-weight: bold;
  border-bottom:solid #fff 1px;}
#mod_dropnavi .mod_dropnavi_child ul li a i.fas.fa-chevron-right{
  padding-left: 1em;}
#mod_dropnavi .mod_dropnavi_child ul li a{
  padding:15px 45px 15px 28px;
  display:block;
  background: #F2F5FA;
  position: relative;}
#mod_dropnavi .mod_dropnavi_child ul li a:hover   {
	text-decoration:none;
	background: #10AF9E;
	color: #fff;}
#mod_dropnavi .mod_dropnavi_child ul li a:before {
  position: absolute;
  top: 32%;
  right: 20%;
  content: '\f054';
  font-size: 0.75rem;
  font-family: Font Awesome\ 5 Free;
  z-index: 1;}
header {
  background: #fff;
  height: 46px;}
  @media only screen and (min-width: 40.063em){
    header {height: 65px;}}
  @media only screen and (min-width: 40.063em){
    div.wrapper.headernav .magslogo {
      padding: 12px 0 12px 10px;}}
  @media only screen and (min-width: 64.063em) {
    div.wrapper.headernav .magslogo {
        padding: 12px 0 12px 35px;}}
div.wrapper.headernav .magslogo img {
width: auto;
display: block;
vertical-align: top;
margin-top: 5px;
margin-left: 5px;
height: 35px;}
  @media only screen and (min-width: 40.063em){
    div.wrapper.headernav .magslogo img {height: 40px;}}
div.wrapper.headernav h1.magslogo + p {display: none;}
  @media only screen and (min-width: 40.063em){
    div.wrapper.headernav h1.magslogo + p {
      display: block;
      font-size: 0.75rem;
      line-height: 1.3;
      position: absolute;
      top: 38%;
      left: 130px;}}
  @media only screen and (min-width: 64.063em) {
    div.wrapper.headernav h1.magslogo + p {
      display: none;}
    div.wrapper.headernav h1.magslogo + p.headeroff {
      display: none;}}
div.wrapper.headernav .nav{position: relative;}
div.wrapper.headernav .icon-mail{
background: #F2F5FA;
width:45px;
height:45px;
position: absolute;
top:0;
right:46px;
text-align: center;
line-height: 45px;
color:#10AF9E;
transition: background-color 0.2s;}
  @media only screen and (min-width: 40.063em){
    div.wrapper.headernav .icon-mail {
      width: 64px;
      height: 64px;
      line-height: 64px;
      position: fixed;
      right: 65px;
      font-size: 2rem;}}
  @media only screen and (min-width: 64.063em) {
    div.wrapper.headernav .icon-mail {
      right: 0;}}
div.wrapper.headernav a.icon-mail:hover {
background: #10AF9E;
color: #fff;}
div.wrapper.headernav .container{
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 5px;}
  @media only screen and (min-width: 40.063em) {
    div.wrapper.headernav .container {
      margin-top: 0px;
      margin-bottom: 0px;
      height: 44px;
      padding: 0;}}
  @media only screen and (min-width: 64.063em) {
    div.wrapper.headernav .container {
      height: 26px;
      align-items: left;
      max-width: 780px;
      align-items: left;
      position: fixed;
      right: 130px;
      top: 0;
      justify-content: flex-end;}
    div.wrapper.headernav .container.headeroff2 {
      width: 90%;}}
div.wrapper.headernav .item{
  font-size: 0.6rem;
  line-height: 0.85rem;
  text-align: center;
  font-weight: bold;
  width: 100%;
  padding: 1px 0;
  border-left: none;}
  @media only screen and (min-width: 40.063em) {
    div.wrapper.headernav .item {
      font-size: 0.75rem;
      padding: 0;}}
  @media only screen and (min-width: 64.063em) {
    div.wrapper.headernav .item {
      font-size: 0.8rem;}
    div.wrapper.headernav .item a{
      margin:0 20px;}}
    li.item{list-style: none !important;}
div.wrapper.headernav li.item:nth-of-type(1){
  border-left: none;}
div.wrapper.headernav .navbox {
  padding-bottom: 8px;
  display: none;}
  @media only screen and (min-width: 40.063em) {
    div.wrapper.headernav .navbox {
      padding-top: 0;
      padding-bottom: 0px;}}
  @media only screen and (min-width: 64.063em) {
    div.wrapper.headernav .navbox {
        display: block;}}
div.wrapper.headernav .item span{
  display: block;}
div.wrapper.headernav li.item a{
  display: block;
  transition: color 0.2s;}
div.wrapper.headernav li.item:nth-of-type(1) a{
  border-left:none;}
  @media only screen and (min-width: 40.063em) {
    div.wrapper.headernav .mainNav ul.container li a{
      display: block;
      line-height: 42px;
      border-top: solid 1px #DDDDDD;
      border-bottom: solid 1px #DDDDDD;
      transition: background-color 0.2s linear 0, opacity 0.2s linear 0;}}
  @media only screen and (min-width: 64.063em) {
    div.wrapper.headernav .mainNav ul.container li a {
      white-space: nowrap;
      line-height: 61px;
      border-bottom: 3px solid #FFF;
      transition: border-bottom 0.2s;
      border: none;}
    div.wrapper.headernav .mainNav ul.container li a:hover {
      border-bottom: solid 3px #10AF9E;
      color:#10AF9E;
      background: transparent;}}
/* ヘッダーナビおわり */




/* フッター */
.footerArea{
  margin-top:2rem;
  padding-bottom: 5px;}
#copyright p{
  font-size: 1rem;
  text-align: center;
  margin-top: 10px;}
.snsIcons{
  display: flex;
  justify-content: center;
  align-items: center;}
.snsIconsBox{
  height: 20px !important;
  margin: 5px;}
.fb-like.fb_iframe_widget.fb_iframe_widget_fluid {
    top: 0;
    left: 3px;}
.fb-like.fb_iframe_widget {
    width: 175px;
    height: 20px !important;}
.fb_iframe_widget_fluid {
    display: block;}
.fb_iframe_widget > span {
  vertical-align: baseline !important; }
.insta_btn2 {
  bottom: 0px;
  color: #FFF;
  border-radius: 3px;
  position: relative;
  display: inline-block;
  height: 20px;
  width: 130px;
  text-align: center;
  font-size: 11px;
  line-height: 20px;
  vertical-align: middle;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  overflow: hidden;
  text-decoration: none;}
.insta_btn2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(15deg, #ffdb2c, #f9764c 25%, rgba(255, 77, 64, 0) 50%) no-repeat; }
.insta_btn2 .fa-instagram {
  font-size: 17px;
  position: relative;
  top: 2px;}
.insta_btn2 span {
  display: inline-block;
  position: relative;
  transition: .5s;
  margin-left: 0.5em; }
.insta_btn2:hover {
  color: #FFF;
  opacity: 0.7;}
.insta_btn2:visited {
  color: #FFF;}
.fb-like:hover {
  color: #FFF;
  opacity: 0.7; }
.fb_btn2{
  color: #FFF;
  background-color: #1877F2;
  border-radius: 4px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: opacity 0.2s ease;}
.fb_btn2:hover{
  color: #FFF;
  opacity: 0.7;}
.fb_btn2 span{
  margin-right: 0.5em;}
.fa-facebook-f::before{
  margin-left: 0.5em;}
/* フッターおわり */



/* ダウンロードはこちら */
/* 共通 */
.appDownload{
  padding:1.5rem 0.9375rem 2rem;
  background-color: #FFFFDB;
  margin-top: 2rem;}
  @media only screen and (min-width: 40.063em) {
    .appDownload{
      padding:0;
      background-image: url(../img/top/download-bgimage.png);
      background-color: transparent;
      background-position: 48% center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      height:256px;}
    .appDownloadBtnBox{
      position: absolute;
      top: 22%;
      left:42%;
      max-width:400px;}}
.appDownload p{
  font-size: 1.0rem;
  text-align: center;
  font-weight: bold;}
  @media only screen and (min-width: 40.063em) {
    .appDownload p{
      font-size: 1.4rem;
      text-align: left;
      color:#fff;
      padding-left:0.3rem;}}
.appDownload p span{
  display:block;
  text-align: center;
  font-size: 0.8rem;
  margin-bottom:0.2rem;}
  @media only screen and (min-width: 40.063em) {
    .appDownload p span{
      text-align: left;
      font-size: 1.1rem;}}
.appDownloadBtn{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;}
.btn-app{
  width:48% !important;}
/* TOPページ用調整 */
.top-text .appDownload {
  margin-top: 0px;}





/* TOPページ */
.top-text {
  font-family: 'Noto Sans CJK JP', 'Noto Sans JP', 'Noto Sans', sans-serif;
  color: #000;
  padding-top: 45px !important;}
  @media only screen and (min-width: 40.063em){
    .top-text {padding-top: 64px !important;}}
  @media only screen and (min-width: 64.063em) {
    .top-text {padding-top: 104px !important;}}
/* TOP_スライダー */
.swiper-slide-next{
  opacity: 0.5;}
.swiper-slide-prev{
  opacity: 0.5;}
.headerarea {
    position: relative;
    width: 100%;
    height: auto !important; /* 食い込み防止のため自動計算に */
    background: #fff;
    display: flex;
    flex-direction: column;}
@media only screen and (max-width: 64.063em) {
    /* 1. 親要素：読み込み完了前から「縦並びのFlex」であることをブラウザに確信させる */
    div.headerarea {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        justify-content: center;
        align-items: center;}
    /* 2. 【超重要】orderによる位置のジャンプ（CLS）を防ぐため、各ブロックの高さ（目安）をはじめからガチガチに予約して固定する */
    /* スライダー（1番目） */
    div.swiper-container.topslider {
        order: 1 !important;
        width: 100% !important;
        height: auto !important;}
    /* アプリボタン（2番目） */
    div.appBtnBox {
        order: 2 !important;
        width: 100% !important;
        min-height: 80px !important; /* ボタンが描画される前の「席」を確保 */}
    /* 配送スケジュール（3番目） */
    div.shipSchedule,
    .shipScheduleBox {
        order: 3 !important;
        width: 60%;
        min-height: 110px !important; /* スケジュール表の「席」を確保 */
        margin-top: 10px !important;   /* アプリボタンとの隙間 */}}
    @media only screen and (max-width: 40.063em) {
    div.shipSchedule,
    .shipScheduleBox {
      width: 100%;    }}
/* コンテナ全体の枠確保 (CLS対策含む) */
.swiper-container.topslider {
    position: relative;
    width: 100%;
    max-width: 1080px; /* ctpファイルのPCサイズに合わせる */
    margin: 0 auto;
    aspect-ratio: 1080 / 463; /* 読み込み時のガタつき防止 */
    line-height: 0; /* 画像下の謎の隙間(469px問題)を解消 */
    overflow: hidden;}
/* Swiper固有の調整 */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;}
/* 配送スケジュール (上部固定など) */
div.shipScheduleBox{
  justify-content: center;
  align-items: center;
  display: block;
  min-height: 50px;
  width: 100%;
  margin: 15px 0;
  padding: 0;
  background-color: #ffffff;
  border: solid 1px #10AF9E;
  color: #fff;}
  @media only screen and (min-width: 64.063em) {
  div.shipScheduleBox {
    margin: 0px;
    padding: 10px 0;
    background-color: #10AF9E;
    color: #fff;
    display: flex;}}
.orderDateTitle{
  font-size: 0.9rem;
  font-weight: bold;
  color: #fff;
  background: #10AF9E;
  text-align: center;
  padding: 3px;
  margin-bottom: 0;}
  @media only screen and (min-width: 64.063em) {
    .orderDateTitle{
        margin-left: 0.5rem;}}
.orderDate {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 0;
  padding-top: 8px;
  line-height: 1.6;
  background-color: #ffffff;}
  @media only screen and (min-width: 64.063em) {
    .orderDate {
      padding: 0px;
      font-size: 0.8rem;
      background-color: transparent;}
    .orderDate br {
      display: none;}}
.orderDate span{
  color: #000;
  letter-spacing: .02rem;
  font-weight: bold;
  margin-bottom: 0;}
  @media only screen and (min-width: 64.063em) {
    .orderDate span{
      display: inline-block;
      border-radius: 5px;
      background-color:#ffffff;
      padding: 2px 8px;
      margin-left: 8px;
      color: #10AF9E;}
    .orderDate span .duedate{
      padding: 0px;
      margin: 0px;
      color: #000}}
.orderDate i {
  color: #10AF9E;
  padding: 0 3px 0 5px;
  font-size: 1rem;
  vertical-align: baseline;}
/* TOPスライダー */
.swiper-container.topslider {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0;
  height: auto !important;
  min-height: auto !important; 
  overflow: hidden !important;
  aspect-ratio: auto !important;
  line-height: 0 !important;
  font-size: 0 !important;}
.topslider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto; 
  width: 100% !important;  
  max-width: 100% !important; 
  padding: 0 !important;
  margin-bottom: 30px;
  opacity: 1 !important;
  transition: opacity 0.3s;}
.slider_topic .slick-list {
  margin: 0 !important;
  overflow: hidden !important;}
.topslider .swiper-slide img {
  display: block !important;
  max-width: 100%;
  height: auto !important;
  object-fit: cover !important; }
.slider_topic img {
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: cover !important;}
.swiper-button-next,
.swiper-button-prev {
  display: none !important;}
.swiper-pagination {
  bottom: 0;}
.swiper-pagination-bullet {
  background: #D6D6D6;
  opacity: 1;}
span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #10AF9E;}
@media only screen and (min-width: 64.063em) {
  .swiper-container.topslider {
    max-width: none !important;
    min-height: 368px; }
  .topslider .swiper-slide {
    height: auto !important;
    width: 80% !important;
    max-width: 860px !important;
    margin-bottom: 0;}
  .topslider .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.5 !important; }
  .topslider .swiper-slide img {
    width: 100% !important;
    max-width: none !important;
    object-fit: contain !important;}
  .swiper-button-next,
  .swiper-button-prev {
    display: flex !important; 
    color: #fff;
    background-color: #10AF9E;
    opacity: 0.8;
    top: calc(50% - 6px) !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    width: 35px;
    height: 60px;    }
  .swiper-button-prev { left: 0 !important; }
  .swiper-button-next { right: 0 !important; }
  .swiper-button-next::after, 
  .swiper-button-prev::after {
    display: block;
    color: transparent;
    width: 16px;
    height: 16px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    margin-right: 12px;
    transform: rotate(45deg);    }
  .swiper-button-prev::after {
    transform: rotate(225deg);
    margin-right: 0px;
    margin-left: 12px;}}
/* アプリダウンロードボタン (appBtnBox) */
.appBtnBox {
  padding: 10px 15px 20px;
  background: #F5F5F5;
  display: flex;
  justify-content: center;
  align-items: center;}
.inner {
  display: block;
  align-items: center;
  max-width: 500px;
  width: 100%;}
.appBtnBox .inner p {
  align-content: space-around;
  text-align: center;
  font-size: 0.9rem;
  margin: 0 5px 5px;}
.appBtn {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 80%;}
@media only screen and (min-width: 40.063em) {
  img.ios.iosTopheader,
  img.android.androidTopheader{
    height: 48px;}
  img.ios,
  img.android{
    width: auto;}}
@media only screen and (min-width: 64.063em) {
  .appBtnBox {
    width: 100%;
    background: #FEFDDA;
    padding: 20px 0;}
  .inner {
    max-width: 600px;
    display: flex;
    align-items: center;
    justify-content: center;}
  .inner p {
    margin: 0px;
    font-size: 0.9rem;}
  .appBtn {
    width: 60%;
    margin: 0;}
  .appBtnBox p{
    margin-bottom: 0;
    font-size: 0.9rem;}}


/* 重要なお知らせ (importantNotices) */
div.importantNotices {
  background-color: #ffebeb;
  padding: 15px;
  margin: 0 0 15px;}
div.importantNoticesBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
  background: transparent;
  margin: 0 auto;}
.importantNoticesBox p {
  margin-bottom: 0;}
.orderInfo {
  margin-bottom: 1px;
  font-size: 1rem !important;}
.orderInfo p {
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
  padding-right: 0;}
.orderInfo .icon-info {
  font-size: 1.4rem;
  display: inline-block;
  padding-right: 0.5rem;
  vertical-align: top;
  color: #dc3838;}
.orderInfo .icon-info:before {
  content: "\e901";}
.orderInfoMessage {
  width: 70%;
  position: relative;}
.orderInfoMessage p a {
  display: block;
  width: 100%;
  padding: 8px;
  transition: all 0.2s ease 0s;
  color: #dc3838;
  text-decoration: underline;
  position: relative;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: left;}
.orderInfoMessage p:nth-of-type(1) {
  border: none;}
.orderInfoMessage p a:hover {
  text-decoration: none;
  background-color: #ffebeb;}
.orderInfoMessage p a:after {
  display: none;}
@media only screen and (min-width: 40.063em) {
  div.importantNotices {
    background-color: transparent;
    padding: 30px 0;
    margin: 0;    }
  div.importantNoticesBox {
    flex-direction: row; 
    align-items: stretch; }
  .orderInfoMessage p:nth-of-type(1) {
    border-top: solid 1px #dcdcdc;
    border-bottom: 1px solid #dcdcdc;    }
  .orderInfoMessage p a {
    text-decoration: none;}
  .orderInfoMessage p a:after {
    position: absolute;
    right: 0;
    content: '\f054';
    font-size: 0.8rem;
    font-family: Font Awesome\ 5 Free;
    z-index: 1;}}
@media only screen and (min-width: 64.063em) {
  .orderInfo p {
    padding-right: 1.4rem;}}
/* バナー */
div.topicbanner {
  min-height: 160px;
  background-color: #F5F5F5;
  padding: 15px 15px 5px;}
div.slider_topic {
  max-width: 1080px;
  margin: 0 auto;
  overflow: hidden;
  position: relative; /* ページネーション配置用 */
}
.slider_topic .swiper-slide {
  display: inline-block !important; /* 画像の大きさに合わせる */
  text-align: center;
  margin-bottom: 35px;
  opacity: 1 !important;}
.slider_topic .swiper-slide a {
  display: inline-block !important; /* 画像の大きさに合わせる */
}
.slider_topic .swiper-slide a img {
  display: block; /* img下の余白（隙間）を消すおまじない */
  /* 下記は既存の img 用指定をまとめたものです */
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: cover !important;}
/* ボタン設定（Swiperページネーション） */
.slider_topic .swiper-pagination {
  text-align: center;
  width: 100%;}
.slider_topic .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background: #D6D6D6;
  opacity: 1;
  margin: 0 4px !important;}
.slider_topic .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #10AF9E;
}/* TOP_Mags Inc.とは */
.about-mags-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  margin: 0px;
  padding: 0px;
  max-width: 5000px; }
.about-mags-txt-title {
  color: #000;
  font-size: 1.5rem;
  letter-spacing: .05em;
  margin-top: 0.0rem; 
  margin-bottom: 1.2rem;}
  @media only screen and (min-width: 40.063em){
    .about-mags-txt-title {
      margin-top: 10px;
      margin-bottom: 1.8rem; } }
  @media only screen and (min-width: 64.063em) {
    .about-mags-txt-title {
      margin-bottom: 3.0rem;
      line-height: 2.3rem; } }
.about-mags-txt {
  margin-top: 1.8rem;
  text-align: left;}
  @media only screen and (min-width: 40.063em){
    .about-mags-txt {
    text-align: center;}}
  @media only screen and (min-width: 64.063em) {
    .about-mags-txt {
      margin-top: 0px;
      width: 50%;
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
      order: 2;
      position: absolute;
      top: 50%;
      left: 100%;
      -webkit-transform: translate(-100%, -50%);
      transform: translate(-100%, -50%); }}
.about-mags-img {
  padding-bottom: 15px; }
  @media only screen and (min-width: 40.063em) and (max-width: 64em) {
    .about-mags-img {
      padding: 15px 30px 30px 30px; } }
  @media only screen and (min-width: 64.063em) {
    .about-mags-img {
      width: 50%;
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1;
      margin: 0px;
      padding: 0px; } }
@media only screen and (min-width: 64.063em) {
  .about-mags-img-fit {
    width: 100%;
    height: 500px;
    -o-object-fit: none;
       object-fit: none; } }
/* TOP_タイトル文字 */
.area-title {
  font-family: 'Viga', sans-serif;
  color: #000;
  font-size: 2.0rem;
  letter-spacing: .1em;
  margin-top: 1.3rem;
  margin-bottom: 0.0rem; }
.area-sub-title {
  color: #000;
  font-size: 0.8rem;
  letter-spacing: .1em;
  margin-top: 0.0rem;
  margin-bottom: 2.0rem; }
/* TOP_カードレイアウト */
/* プロダクト紹介 */
.card_box::before,
.card_box::after{
  content: none !important;
  display: none !important;}
.card_box2::before,
.card_box2::after{
  content: none !important;
  display: none !important;}
.card_box{
  padding: 16px 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  justify-content: center;}
  /* PC設定 */
  @media screen and (min-width:64.063em){
    .card_box{
      grid-template-columns: repeat(3, 1fr);}}
.card_02{
  background-color: #ffffff;
  padding: 14px;
  box-shadow: 0px 0px 8px #dddddd;}
.card_02 a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  height: 100%;}
.card_box2{
  padding: 16px 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  justify-content: center;}
  /* PC設定 */
  @media screen and (min-width:64.063em){
  .card_box2{
    grid-template-columns: repeat(4, 1fr);}}
.card_image_02 {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
  transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); }
  /* タブレットのみ設定 */
  @media only screen and (min-width: 40.063em) and (max-width: 64em) {
    .card_image_02 {
      display: inline-block;
      width: 50%;
      vertical-align: middle; }}
.card_content_02 {
  background-color: white;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1rem; }
  /* タブレットのみ設定 */
  @media only screen and (min-width: 40.063em) and (max-width: 64em) {
    .card_content_02 {
      display: inline-block;
      width: 50%;
      vertical-align: middle; }}
.card_title_02 {
  color: #000000;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 1.0rem; }
.card_text_02 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  color: #000000;
  font-size: 1.0rem;
  line-height: 1.5;
  margin-bottom: 1.0rem; }
  @media only screen and (min-width: 64.063em) {
    .card_text_02 {
      font-size: 0.9rem; } }
/* 利用シーン */
.card_04{
  display: flex;
  flex-direction: column;
  align-items: center; 
  background-color: #ffffff;
  padding: 10px;
  box-shadow: 0px 0px 8px #dddddd;
  flex: 0 0 calc(50% - 10px);
  font-size: 60%;  }
.card_image_04{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
  transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); }
.card_button_wrap {
  margin-top: auto;
  padding-bottom: 1.0rem;}
.card_button{
  margin-top: auto;
  border: 2px solid #000000;
  border-radius: 4px;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.11);
  font-size: 0.9rem;
  font-weight: bold;
  padding: 0.6rem 2.0rem 0.6rem 2.0rem; 
  color: #000000;}
.top_linkbtn{
  display: inline-block;
  border: 2px solid #000000;
  border-radius: 4px;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.11);
  font-size: 0.9rem;
  font-weight: bold;
  padding: 0.6rem 2.0rem 0.6rem 2.0rem; 
  margin: 1.0rem auto 3.0rem;
  color: #000000;
  background-color: #ffffff;}
.top_linkbtn:hover{
  color: #000000;}
/* TOP_お知らせ */
div.site_information_wrapper {
  border: solid 1px;
  border-color: #E8EAEA; }
div.site_information_wrapper div.site_infomation {
  height: 8em;
  padding-top: 0.5em;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 0.5em;
  padding-left: 0.5em;
  scrollbar-face-color: #DBE5EF; }
div.site_information_wrapper div.site_infomation ul.info_line {
  list-style: none;
  margin-left: 0.5em;
  margin-right: 0.5em; }
div.site_information_wrapper div.site_infomation ul.info_line .site_information_body {
  margin: 0;
  display: inline-block;
  width: 100%; }
div.site_information_wrapper div.site_infomation ul.info_line .site_information_body div.body {
  line-height: 150%;
  font-size: 0.85em;
  margin-bottom: 0.6em; 
  letter-spacing: 0.01rem;}
div.site_information_wrapper div.site_infomation ul.info_line .site_information_body div.body span.topInfoImportant a,
div.site_information_wrapper div.site_infomation ul.info_line .site_information_body div.body span.topInfoImportant a:hover {
    color:#ff0000 !important;
    font-weight:bold !important;}
/* TOP_お知らせ_newsページ */
  @media only screen and (min-width: 40.063em) {
    .importantInfo {
      max-width: 790px;}}
.importantInfo.emergency {
  border: solid 1px #dd641d;
  margin: 0 auto 20px;
  box-sizing: border-box;
  padding: 0.5rem 1rem 1.5rem;
  width: 100%;}
  @media only screen and (min-width: 40.063em) {
    .importantInfo.emergency {
      padding: 2.5rem 7rem;}}
.importantInfo h2 {
  color: #dd641d;}
/* TOP_下部リンク集 */
.footerP a {
  line-height: 2.2;
  font-size: 0.65rem;  }
.footerP .links_item span {
  padding-bottom: 0.5rem;
  display: inline-block;}
.footertop{margin-top:10px;}
  @media only screen and (min-width: 40.063em) {
    .footertop{margin-top:20px;}}
  @media only screen and (min-width: 64.063em) {
    .footertop{margin-top:30px;}}
.links_container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto; }
  /* PC対応 */
  @media only screen and (min-width: 40.063em) {
  .links_container {
    grid-template-columns: 1fr 1fr 1fr 1.2fr;
    grid-template-rows: 16rem 11rem;}}
.links_item {
  padding: 5px;
  padding-left: 20px; }
.box-big1 {
  grid-row: auto; }
  @media only screen and (min-width: 40.063em){
  .box-big1 {
    grid-row: span 2;}}
.link_font {
  font-size: 0.7em; }
.link_title_font {
  font-size: 1.2em;
  font-weight: bold;
  cursor: auto; }
div.links_container a:link,
div.links_container a:visited,
div.links_container a:hover,
div.links_container a:focus,
div.links_container a:active {
  color: #50646E; }
/* ダウンロードはこちら */.valign-container {display: table;}
/* TOPページおわり */





/* 商品ページ */
/* プロダクト一覧 */
@media only screen and (min-width: 40.063em) {
  div.PLineUp .PagesItem {
    width: 48%;}}
.itemBtn {
  position: relative;
  background-color: #ffffff;
  width: 100%;
  height: auto;
  padding: 0.7rem 0.7rem 4rem 0.7rem;
  box-shadow: 0px 0px 8px #dddddd;
  margin-bottom: 2rem;}
.itemBtn h2 {
  font-size: 1.2rem !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;}
.itemBtn a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;}
.card_link_text {
  color: #10AF9E;
  text-decoration: underline;
  margin-top: 1rem;
  padding: 0 0.3rem;
  position: absolute;
  bottom: 1.3rem;
  right: 1rem;}
/* フォトブック */
/* 商品ページ・テンプレート一覧 */
.print_type {
  display: flex;
  flex-direction: column;
  margin: 1.0rem 0rem;}
  @media only screen and (min-width: 40.063em) {
    .print_type {flex-direction: row;}}
.print_type img{
  width: 50%;
  margin: auto 2.0rem auto 0rem;}
  @media only screen and (min-width: 40.063em) {
    .print_type img{width: 20%;}}
.print_type p {
  color: #50646E;}
div.specTable{
  display: flex;
  flex-direction: column;
  height: auto;}
div.Pages table caption {
  background: transparent;
  color: #10AF9E;
  font-size: 1.125rem;
  font-weight: bold;
  text-align: left;
  margin-bottom: 0.3rem;}
div.Pages table {
  border-collapse: collapse;
  border-spacing: 0;
  width:100%;}
div.Pages table th,
div.Pages table td{
  border-top: solid 1px #DDDDDD;
  vertical-align: middle;
  padding: 0.7rem;}
  @media only screen and (min-width: 40.063em) {
    div.Pages table td {padding: 1rem 1.5rem;}}
div.Pages table th{
  width: 5rem;
  padding-left:0;
  padding-right: 0;
  background: #F4F4F4;
  text-align: center;}
  @media only screen and (min-width: 40.063em) {
    div.Pages table th {width: 20%;}}
div.Pages table td span{
  padding-top:0.5rem;
  display: inline-block;}
  @media only screen and (min-width: 40.063em) {
  div.Pages table tr th{border-left: solid 1px #DDDDDD;}
  div.Pages table tr td {border-right: solid 1px #DDDDDD;}}
div.Pages table tr.last th,
div.Pages table tr.last td{
  border-bottom: solid 1px #DDDDDD;}
section.specification i.fas.fa-circle{
  font-weight: bold;
  color: #9fdfd8;
  padding-right: 0.1em;}
section.specification div.point i.fas.fa-circle{
  font-weight: bold;
  color: #bababa;
  padding-right: 0.1em;}
div.Pages .mainContents .point p{
  font-weight: bold;
  margin-top: 3rem;
  margin-bottom: 0.3rem;}
  @media only screen and (min-width: 40.063em) {
    div.Pages .mainContents .point p {margin-top: 4rem;}}
.point ul li {
  padding-left: 1em;
  text-indent: -0.48em;}
.point ul li i{
  font-size: 0.8em;
  color:#BABABA;}
div.Pages.photobookSpec p.text-right a:after {
  content: '';
  font-size: 1rem;
  font-family: "FontAwesome";
  margin-right: 3px;}
div.Pages.photobookSpec p.text-right a {
  text-decoration-skip-ink: none}
div.Pages.photobookSpec .typebox{
  border: solid 1px #DDDDDD;
  padding: 25px 20px}
div.Pages.photobookSpec .typebox h3:nth-of-type(1){
  background: #10AF9E;
  padding:5px 15px;
  border-radius: 2px;
  color: #FFF;
  margin-top:0;
  display: inline-block;
  letter-spacing: 0.1em}
div.Pages.photobookSpec .typebox h3:nth-of-type(2){
  background: #8A7B59;
  padding:5px 15px;
  border-radius: 2px;
  color: #FFF;
  margin-top:20px;
  display: inline-block;
  letter-spacing: 0.1em}
div.Pages.photobookSpec .typebox p.text-right{
  color: #8A7B59;
  margin-top: 10px;}
div.Pages div.PagesItem {margin-bottom: 2.5rem;}
  @media only screen and (min-width: 40.063em) {
  div.Pages div.PagesItem {
    text-align: left;
    margin-bottom: 3.5rem;}}
/* ボードブック */
.Pages.boardbook .calendarbox{width: 48%;}
  @media only screen and (min-width: 64.063em) {
  .Pages.boardbook .calendarbox{
    width: 33%;
    padding: 0 20px;}}
.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;}
div.Pages.boardbook div.itemDescription2{
  margin-bottom: 50px;}
  @media only screen and (min-width: 40.063em) {
  div.Pages.boardbook div.itemDescription2 {
  margin-bottom: 90px;}}
div.Pages div.scenebox {
  display: flex;
  flex-wrap: wrap;}
div.Pages div.scenebox div.sceneEx {
  text-align: center;
  width: 33%;
  margin-bottom: 30px;}
div.Pages div.scenebox div.sceneEx img{
  width: 90%;
  text-align: center;}
  @media only screen and (min-width: 40.063em) {
      div.Pages div.scenebox div.sceneEx img {
      width: 80%;}}
div.Pages div.scenebox div.sceneEx p{
  text-align: center;
  line-height: 1.3;
  font-size: 0.9rem;
  margin-top: 7px;}
div.Pages.boardbook div.sceneEx p br.spBr{
  display: none;}
.freespace_caption {
  text-align: right;}
div.Pages.boardbook .voice h3{
 text-align: center;}
div.Pages.boardbook .voice img {
  display: table-cell;
  margin: auto;}
div.boardbook .typebox {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 20px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
  border-radius: 15px;}
div.boardbook .typebox ::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;}
div.boardbook .typebox p {
  margin: 0;
  padding: 0;}
/* プレミアムボード */
.tipsForMaking{  margin-top: 2.5rem;}
.tipsForMakingImage{margin-top: 0.8rem;}
  @media only screen and (min-width: 40.063em) {
  .tipsForMaking{display: flex;}
  .tipsForMakingP {
    width: 70%;
    margin-right: 1.5rem;}
  div.Pages h3.tipsTitle {
    font-size: 1.4rem;}
  .mblitle{
    display: inline-block;
    margin-bottom: 1rem;}}
  @media only screen and (min-width: 40.063em) {
    .mblitle {
      display: inline-block;
      margin-bottom: 0.3rem;}}
/* 日めくりカレンダー */
@media only screen and (min-width: 40.063em) {
  div.Pages .mainContents .vdcImage p {
    margin-bottom: 2rem;}}
/* MYカスタム手帳 */
@media only screen and (min-width: 40.063em) {
  div.Pages.hibiya .PagesItem.plusComment {
    margin-top: 3rem;}}
/* 商品ページおわり */





/* 利用シーン */
div.contents_normal {
  padding-top: 1em;
  background-color: #FFFFFF;
  position: relative;
  padding-bottom: 1em;}
/* ウェディング */
h3.wedding {
  font-weight: bold;
  color: #f8b2ba;}
h3.wedding::before {
  content: url(../img/scene/sc4_title.png);
  position: relative;
  top: 5px;
  margin-right: 0.3em;}
/* 七五三 */
.show-for-medium-up{display: none !important; }
  @media only screen and (min-width: 40.063em) {
    .show-for-medium-up{display: inherit !important;}
    .show-for-small-only{display: none;}}
/* 卒園 */
div.samplebook img{
  margin: 1.0rem auto;}
/* デザイナー紹介 */
div.Pages section.designerPlofile div.designerMemo{
  margin-top: 50px;
  border: solid 1px #DDDDDD;
  padding: 20px 10px;
  clear: both;}
div.Pages section.designerPlofile div.designerMemo img{
  width: 20%;
  height: auto;
  float: left;
  padding-right: 3%;}
div.Pages section.designerPlofile div.designerMemo div.designerDiscription{
  padding-left: 20%;}
div.Pages section.designerPlofile div.designerMemo p.name_degigner{
  font-weight: bold;
  margin-bottom: 10px;}
div.Pages section.designerPlofile div.designerMemo div.designerDiscription p.plofile + p{
  margin-top: 10px;
  margin-bottom: 15px;}
div.Pages section.designerPlofile div.designerMemo div.snslinkbox{
  overflow: hidden;
  margin-top: 16px;}
div.Pages section.designerPlofile div.designerMemo div.snslinkbox img{
  width: 20%;
  height: auto;
  padding-right: 20px;}
  @media only screen and (min-width: 40.063em) {
    div.Pages section.designerPlofile div.designerMemo div.snslinkbox img {
      width: 10%;
      height: auto;}}
div.Pages section.designerPlofile div.designerMemo div.snslinkbox a:hover img{
  opacity: 0.8;}
/* 卒団 */
/* 卒団 - 上部ナビ */
.PageNav-container {
  margin: 1.0rem auto 4.0rem;
  display: flex;
  justify-content: space-evenly;
  overflow: visible;
  flex-wrap: wrap;}
  @media only screen and (min-width: 40.063em) {
  .PageNav-container {
    margin: 1.0rem 2.0rem 3.0rem;
    gap: 1.0rem;}}
  @media only screen and (min-width: 64.063em) {
  .PageNav-container {
    margin: 1.0rem auto 4.0rem;
    display: flex;
    overflow: visible;
    gap: 0px;
    border-left: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;}}
.PageNav-item {
  background-color: #ffffff;
  color: #2EB9AA;
  padding: 6px 2px;
  flex-grow: 0;
  width: 42%;
  border-bottom: 1.5px solid #E5E5E5;
  font-size: smaller;
  font-weight: bolder;}
  @media only screen and (min-width: 40.063em) {
  .PageNav-item {
    flex-grow: 1;
    width: 30%;
    border-bottom: 2px solid #D9D9D9;}}
  @media only screen and (min-width: 64.063em) {
  .PageNav-item {
    width: auto;
    border: none;
    border-right: 1px solid #D9D9D9;}}
  @media only screen and (min-width: 40.063em) {
    .PageNav-item:last-child {
      border-right: none;}}
.PageNav-item i {
  margin-top: 6px;
  display: inline-block;}
/* 卒団 - テンプレート一覧 */
.design_container1 {
  display: grid;
  gap: 1.0rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 0.5rem 0 4.0rem;}
  @media only screen and (min-width: 40.063em) {
    .design_container1 {
      grid-template-columns: repeat(3, 1fr);}}
  @media only screen and (min-width: 64.063em) {
    .design_container1 {
      grid-template-columns: repeat(4, 1fr);}}
.design_container2 {
  display: flex;
  flex-direction: column;}
.design_container3 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.3rem;}
    @media only screen and (min-width: 40.063em) {
    .design_container3 {
      gap: 0.5rem;}}
.design_container3 a {
  background-color: #ffffff;
  color: #10AF9E;
  font-size: smaller;
  font-weight: bolder;
  border: solid 1px;
  border-radius: 2px;
  padding: 2px;}
  @media only screen and (min-width: 40.063em) {
  .design_container3 a {
    border: solid 2px #10AF9E;
    padding: 6px;
    border-radius: 4px;}
  .design_container3 a:hover {
    border: solid 2px #10AF9E;}}
.design_container3 a:hover {
  color: #ffffff;
  border: solid 1px #10AF9E;
  background-color: #10AF9E;}
.p_title {
  font-weight: bold;
  font-size: 1.2rem;
  letter-spacing: .1em;
  margin-bottom: 0.5rem;}
/* フォトグラファー向けポートフォリオ */
.title_check::before {
  content: url(../img/scene/5/sc5_title.png);
  position: relative;
  top: 5px;
  margin-right: 0.3em;}
/* 利用シーン・コラボ - アプリダウンロード */
.create_icon {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 2.0rem;
  line-height: 50px;
  vertical-align: middle;}
.create_text {
  position: relative;
  display: inline-block;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  vertical-align: middle;}
/* 利用シーンおわり */



/* コラボテンプレート */
/* 日比谷花壇 */
p.topleadLink {
  padding-left: 0.9375rem;
  margin-top: -1rem;}
.shortColumn {
  margin-bottom: 1rem;
  text-align: left;}
@media only screen and (min-width: 64.063em) {
  .shortColumn {
    width: 51.75rem;
    margin: 0 auto 5rem;}}
div.Pages p.campaignP {
  margin-bottom: 1rem;
  text-align: left;}
  @media only screen and (min-width: 64.063em) {
    div.Pages p.campaignP {
      text-align: center;}}
/* 日比谷花壇 - アプリダウンロード */
div.Pages.hibiya .DLP {
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;}
div.Pages.hibiya .DLP.notice {
  margin-top: 1rem;}
.appDownloadBtnSimple {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;}
  @media only screen and (min-width: 40.063em) {
    .appDownloadBtnSimple {
      width: 50%;}}
/* 日比谷花壇 - 商品ラインナップ */
div.Pages.hibiya section {
  margin-top: 5rem;}
.items.hibiyaItem {
  display: block;
  margin-bottom: 2rem;}
  @media only screen and (min-width: 64.063em) {
    div.Pages .items.hibiyaItem {
      margin-bottom: 4rem;}}
div.Pages .mainContents p.hibiyaPageLink {
  text-align: center;
  margin-top: 0.5rem;}
  @media only screen and (min-width: 40.063em) {
    div.Pages .mainContents p.lineUpSubP {
      margin-top: 0;
      margin-bottom: 1rem;
      text-align: center;}}
/* 日比谷花壇 - テンプレート一覧 */
.Pages.hibiya .calendarbox {
  width: 48%;}
  /* @media only screen and (min-width: 40.063em) {
    div.Pages .itemDescription.templateList {
      width: 80%;
      margin: 0 auto;}} */
  @media only screen and (min-width: 64.063em) {
    .Pages.hibiya .calendarbox {
      width: 33%;
      padding: 0 20px;}}
/* 日比谷花壇 - 作り方 */
  @media only screen and (min-width: 40.063em) {
    .appStep {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;}}
.appStepBox {
  text-align: center;
  margin-bottom: 5rem;}
  @media only screen and (min-width: 40.063em) {
    .appStepBox {
      width: 45%;
      margin-left: 20px;}}
  @media only screen and (min-width: 64.063em) {
    .appStepBox {
      width: 20%;
      margin-left: 5%;}}
.appStepBox p {
  text-align: left;
  margin-top: 1rem;}
.otheritem_center {
  text-align: center;}
  @media only screen and (min-width: 64.063em) {
    .hibiyaKadanLogo img {
      margin-bottom: 3rem;
      width: 40%;}}
  @media only screen and (min-width: 64.063em) {
    .appStep::after {
      display: block;
      content: "";
      width: 50%;}}
/* KUBBE */
.kubbe_title::before {
  content: url(../img/kubbe/icon_leaf.png);
  position: relative;
  top: 3px;
  margin-right: 0.3em;}
/* KUBBE - テンプレート一覧 */
.kubbe .calendarbox {
  width: 45%;}
  @media only screen and (min-width: 64.063em) {
    .kubbe .calendarbox {
      width: 30%;}
    .kubbe .items::after {
      content: "";
      display: block;
      width: 30%;}}
/* KUBBE - アプリダウンロード */
.kubbe_create .background_image {
  background-image: url(../img/kubbe/bg_image.png);
  background-size: cover;
  color: #3A3123;}
.create_btn {
  margin: 30px auto 10px;
  text-align: center;
  padding: 10px;
  border: 1px solid #9EAFB7;}
.kubbe_create .create_btn {
  border: 1px solid #3A3123;}
.kubbe_create .create_icon,
.kubbe_create .create_text {
  color: #3A3123;}
/* STAUB */
div.Pages.staub .items.procedure {
  background: #f3efef;
  margin: 1.8rem 0 4rem;}
div.Pages.staub .items.procedure .itembox {
  padding: 0;}
  @media only screen and (min-width: 40.063em) {
    div.Pages.staub .items.procedure .itembox {
      width: 50%;}}
div.Pages.staub .items .itembox {
  margin: 0;}
div.Pages.staub h3.subtitle {
  margin: 0.5rem 0 0.5rem;
  background: #dfdddd;
  display: inline-block;
  padding: 5px 20px;
  border-radius: 1rem;}
div.Pages .itemDescription.templateList {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;}
div.Pages .itemDescription.templateList .PagesItem {
  width: 48%;}
/* コラボおわり */




/* ガイド */
/* スタートガイド */
div.Pages.startguide h1 {
  margin-bottom: 4rem;
  margin-top: 4rem;
  padding-left: 0;
  font-size: 2.2rem;
  text-align: center;
  font-weight: bold;}
div.Pages.startguide section.topic {
  margin-bottom: 50px;}
div.Pages.startguide h2 {
  font-size: 1.85rem;
  text-align: left;
  font-weight: bold;
  color: #10AF9E;
  text-indent: -2.3rem;
  padding-left: 2.2rem;
  line-height: 1.4;}
div.Pages.startguide .typebox {
  background: transparent;
  margin: 0px 0px 40px;
  padding: 0px;}
div.Pages.startguide h3 {
  font-size: 1.3rem;
  text-align: left;
  margin-top: 0;}
div.Pages.startguide p.text-right {
  margin-top: 5px;}
div.Pages.startguide .caution {
  padding: 12px;
  margin-bottom: 10px;
  margin-top: 10px;
  border: 5px double #A4A4A4;
  border-radius: 10px;}
div.Pages.startguide .caution .iconbox {
  display: flex;
  align-items: stretch;}
div.Pages.startguide .CautionImg {
  width: 30%;
  padding-right: 15px;
  padding-top: 5px;}
  @media only screen and (min-width: 40.063em) {
    div.Pages.startguide .CautionImg {
      width: 64px;
      padding-top: 0;}}
div.Pages.startguide .CautionImg img {
  width: 100%;}
div.Pages.startguide .caution p strong {
  font-size: 1.2rem;}
div.Pages.startguide ul.point {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 15px 20px;
  font-weight: bold;
  border: solid 1px #10AF9E;}
div.Pages.startguide ul.point li {
  margin-bottom: 10px;
  font-weight: bold;}
div.Pages.startguide ul.point li:before {
  content: ' \f111';
  font-size: 1em;
  font-family: "FontAwesome";
  margin-right: 3px;
  color: #9fdfd8;}
div.Pages.startguide table th, div.Pages table{
  width: 100%;}
/* マグ子の部屋 */
@media only screen and (min-width: 40.063em) {
  div.Pages.magco {
    background: #fceaf0;}}
@media only screen and (min-width: 64.063em) {
  div.Pages.magco {
    background: url(../img/magcoroom_blog/pattern.png) center top #fceaf0;}}
div.Pages.magco .PageHeader
  {padding-top: 0;}
div.Pages.magco .PageHeader h1 {
  margin-bottom: 0.5rem;
  margin-top: 0;
  padding-left: 0;}
  @media only screen and (min-width: 40.063em) {
    div.Pages.magco .PageHeader h1 {
      margin: 20px;}}
div.Pages.magco .PageHeader h1 img {
  width: 100%;
  height: auto;
  padding-left: 0;}
div.Pages.magco p.date {
  font-size: 0.85rem;
  color: #828282;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 800;
  padding: 0 0.9375rem;
  margin: 0;}
div.Pages.magco .BlogColumn {
  padding: 0 0.9375rem;}
  @media only screen and (min-width: 40.063em) {
    div.Pages.magco .Blog {
      background: #fff;
      margin-left: 20px;
      margin-right: 20px;
      border-radius: 10px;}
    div.Pages.magco .BlogColumn {
      padding: 0 20px 30px 20px;
      display: flex;
      justify-content: space-between;}
    div.Pages.magco .mainContents {
      width: 70%;
      padding-right: 35px;}
    div.Pages.magco div.side {
      margin-top: 15px;
      width: 30%;}}
div.Pages.magco h2.themeTitle {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  text-align: left;
  color: #333;
  position: relative;
  padding-left: 3em;
  padding-bottom: 30px;
  margin-bottom: 35px;}
div.Pages.magco h2.themeTitle:before {
  position: absolute;
  left: 0;
  content: "";
  display: inline-block;
  width: 3em;
  height: 3em;
  background: url(../img/magcoroom_blog/magsinco_hakase.png) no-repeat;
  background-size: contain;}
div.Pages.magco h2.themeTitle::after {
  content: "";
  height: 10px;
  width: 100%;
  background: url(../img/magcoroom_blog/magco_obi.png);
  background-size: cover;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;}
div.Pages.magco p.illustP {
  margin: 30px auto;
  width: 90%;
  text-align: center;}
  @media only screen and (min-width: 40.063em) {
    div.Pages.magco p.illustP img {
      width: 60%;}}
div.Pages.magco .commentLeft,
div.Pages.magco .commentRight {
  display: flex;
  margin-bottom: 20px;}
div.Pages.magco .commentRight {
  flex-direction: row-reverse;}
div.Pages.magco .commentLeft figure,
div.Pages.magco .commentRight figure {
  margin: -10px 0 0 0;
  width: 27%;}
  @media only screen and (min-width: 40.063em) {
    div.Pages.magco .commentLeft figure,
    div.Pages.magco .commentRight figure {
      width: 23%;
      margin: -13px 0 0 0;}}
div.Pages.magco .balloonL,
div.Pages.magco .balloonR {
  display: inline-block;
  position: relative;
  margin: 0 0 0 7px;
  padding: 15px 13px;
  max-width: 250px;
  border-radius: 12px;
  background: #F5F5F5;
  align-self: flex-start;}
div.Pages.magco .balloonR {
  margin: 0;}
  @media only screen and (min-width: 40.063em) {
    div.Pages.magco .balloonL,
    div.Pages.magco .balloonR {
      min-width: 70%;
      padding: 15px 18px;}}
div.Pages.magco section.greeting .balloonL p,
div.Pages.magco section.greeting .balloonR p,
div.Pages.magco section.closing .balloonL p,
div.Pages.magco section.closing .balloonR p {
  color: #E12880;
  font-weight: 800;
  letter-spacing: 0.06rem;}
div.Pages.magco strong {
  color: #E12880;
  font-weight: 800;}
div.Pages.magco div.side {
  margin-top: 60px;}
div.Pages.magco div.side h3 span img {
  width: 65%;
  vertical-align: bottom;
  padding-right: 10px;}
div.Pages.magco div.side h3 {
  font-size: 12px;
  line-height: 22px;
  margin-bottom: 5px;
  font-weight: bold;
  position: relative;
  color: #333;}
div.Pages.magco div.side ul li {
  position: relative;
  padding-right: 2em;
  border-bottom: dotted 1px #DDDDDD;
  text-decoration: none;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
  color: #333;}
  @media only screen and (min-width: 40.063em) {
    div.Pages.magco div.side ul li {
      padding-right: 1.5em;
      font-size: 0.85rem;}}
div.Pages.magco div.side ul li a {
  text-decoration: none;
  display: block;
  padding: 20px 0 20px 5px;
  color: #333;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;}
div.Pages.magco div.side ul li:after {
  font-family: 'FontAwesome';
  content: "\f054";
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -12px;
  color: #ef97b2;}
/* 配送・お支払い */
div.Pages div.shipping_schedulebox h3 {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 10px;}
div.Pages table.oderDate th, div.Pages table.oderDate td {
  border: solid 1px #DDDDDD;
  vertical-align: middle;
  text-align: center;}
div.Pages table.oderDate td span {
  padding-top: 0rem;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: bold;}
.text-memo {
  font-size: 0.85rem;
  text-align: left;}
div.Pages p.text-memo:first-of-type {
  margin-bottom: 2px;}
div.Pages p.text-memo {
  margin-bottom: 5px;}
div.Pages p.text-memo strong {
  font-size: 0.85rem;}
div.Pages.order h2 {
  margin-top: 3rem;}
div.Pages.order .importantInfo h2 {
  margin-top: 1.3rem;}
table.twoton tr:nth-child(2n+1) {
  background: #F5F5F5;}
div.Pages div.shipping_schedulebox {
  max-width: 630px;
  margin: 0 auto;}
@media only screen and (min-width: 40.063em) {
  #shipping_schedule, #emergencyinfo, #gwinfo, #newyearinfo, #deliverlateinfo, #deliverlateinfo2, #summervacationinfo, #monthly, #omatome, #chien, #bulk-discount {
    margin-top: -64px;
    padding-top: 64px;}}
@media only screen and (min-width: 40.063em) {
  div.Pages.order div.QandA {
    display: flex;
    margin-bottom: 20px;}}
img.img_tate{
  @media only screen and (min-width: 40.063em) {
    width: 50%;}}
/* よくある質問 */
.accordion {
  margin-bottom: 0;}
.accordion:before, .accordion:after {
  content: " ";
  display: table;}
.accordion .accordion-navigation, .accordion dd {
  display: block;
  margin-bottom: 0 !important;}
.Pages.FAQ a {
  text-decoration: none;}
.accordion .accordion-navigation > a, .accordion dd > a {
  background: #EFEFEF;
  color: #50646E;
  padding: 1rem;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 1rem;}
.accordion .accordion-navigation > a:hover, .accordion dd > a:hover {
  background: #e3e3e3;}
.accordion .accordion-navigation > .content, .accordion dd > .content {
  display: none;
  padding: 0.9375rem;}
.accordion .accordion-navigation > .content.active, .accordion dd > .content.active {
  display: block;
  background: #FFFFFF;}
/* 撮影テクニック_記事 */
.smallwide .dlBtn {
  margin: 40px 0px;}
/* 関連記事 */
div.related_post_oya {
  display: grid;
  gap: 1.0rem;
  grid-template-columns: repeat(1, 1fr);
  margin: 0.5rem 0 4.0rem;}
  @media only screen and (min-width: 40.063em) {
    div.related_post_oya {
      grid-template-columns: repeat(3, 1fr);}}
div.related_post_oya div.related_post_ko {
  display: flex;
  flex-direction: column;
  width: auto;}
/* 出荷予定日検索 */
fieldset {
  border: 1px solid #DDDDDD;
  padding: 1.25rem;
  margin: 1.125rem 0;}
fieldset legend {
  font-weight: bold;
  background: #FFFFFF;
  padding: 0 0.1875rem;
  margin: 0;
  margin-left: -0.1875rem;}
.orderDate2 {
  text-align: center;
  margin-bottom: 0;
  padding-top: 8px;
  color: #000;
  line-height: 1.6;
  font-weight: bold;
  padding-right: 10px;}
.orderDate2 i {
  color: #10AF9E;
  padding: 0 3px 0 5px;
  font-size: 1rem;
  vertical-align: baseline;}
/* ガイドおわり */



/* オススメ機能 */
/* PDFフォトブック */
table.large-12.columns.twoton {
  padding-left: 0;
  padding-right: 0;}


/* 作品集 */
/* サンプルブック */
div.items .samplebooks {
  margin: 2.0rem 1.0rem auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: normal;}
@media only screen and (min-width: 40.063em) {
  .items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 0.9375rem;}}
.itembox {
  background: #f5f5f5;
  padding: 2rem;
  border-radius: 0.5rem;
  width: 100%;
  margin: 0 0.9375rem 1.5rem 0.9375rem;}
  @media only screen and (min-width: 40.063em) {
    .items .itembox {
      width: 45%;
      margin-bottom: 2rem;}}
  @media only screen and (min-width: 64.063em) {
    .items .itembox {
      width: 30%;}}
div.items .samplebooks img {
  margin-bottom: 1.0rem;}
.Photobook img {
  width: 60%;
  height: auto;
  border: solid 1px #c0c0c0;}
div.items .samplebooks p {
  margin: 0 auto;
  border-radius: 4px;
  width: fit-content;
  font-weight: bold;
  text-align: start;}
div.items .samplebooks p.type {background-color: #fefcc3;}
div.items .samplebooks p.template {background-color: #B7E7E2;}
div.items .samplebooks p.use {background-color: #DBE5EF;}
div.items .samplebooks h5 {
  margin-top: 0.4rem;
  margin-bottom: 0.6rem;
  font-weight: normal;}
/* みんなのフォトブック */
.jacket {
  text-align: center;}
.jacket img{
  height: auto;
  border: solid 1px #c0c0c0;}
.itembox .jacket a {
  display: block;}
@media only screen and (min-width: 40.063em) {
  .itembox .Photobook a img {
    height: 100%;
    width: auto;}}
.Photobook img {width: 60%;}
.calendar img {width: 80%;}
.miniAlbum img {width: 70%;}
  @media only screen and (min-width: 40.063em) {
    .itembox .Photobook a,
    .itembox .calendar a,
    .itembox .miniAlbum a {
      height: 185px;
      width: auto;
      line-height: 185px;}}
.itembox h4 {
  margin-top: 1.5rem;
  margin-bottom: 0;
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;}
div.row div.itembox div.caption h4 + p {
  text-align: center;
  margin-bottom: 1rem;
  margin-top: 0.3rem;}
p.snslink {
  margin-top: 0.5rem;}
/* 雑誌サンプル画面 */
.bookstyle div {
  padding-top: 0.3em;
  padding-bottom: 0.6em;}
.bookstyle div img {
  box-sizing: border-box;}
.bookstyle div img.single,
.bookstyle div img.left,
.bookstyle div img.right {
  border: solid 0.1em #E8EAEA;}
.left {float: left !important;}
.bookstyle div img.left {
  border-right: solid 0.05em #E8EAEA;}
.right {float: right !important;}
.bookstyle div img.right {
  border-left: solid 0.05em #E8EAEA;}
div.sampleCalendar .bookstyle div {
  text-align: center;}
.bookstyle div img.single {
  width: 70%;}
.bookstyle div img.top {
  border-top: solid 0.1em #E8EAEA;
  border-bottom: solid 0.05em #E8EAEA;
  border-right: solid 0.1em #E8EAEA;
  border-left: solid 0.1em #E8EAEA;
  width: 70%;}
.bookstyle div img.bottom {
  border-top: solid 0.05em #E8EAEA;
  border-bottom: solid 0.1em #E8EAEA;
  border-right: solid 0.1em #E8EAEA;
  border-left: solid 0.1em #E8EAEA;
  width: 70%;}
#swipebox-slider .slide img {
  border: solid 0.1em #E8EAEA !important;}
/* サンプルブックおわり */

/* テンプレート一覧 */
div.Pages.userPhotobook h1 + p {
  padding: 0 0.9375rem;}
ul.categoryList {
  display: block;
  min-height: 1.5rem;}
  @media only screen and (min-width: 64.063em) {
    ul.categoryList br{display: none;}}
ul.categoryList li {
  float: left;
  display: block;
  height: 1.5rem;
  color: #222222;
  font-size: 0.875rem;
  margin-left: 0.3125rem;}
ul.categoryList li a, ul.categoryList li button {
  display: block;
  padding: 0.0625rem 0.625rem 0.0625rem;
  color: #999999;
  background: none;
  border-radius: 3px;
  font-weight: normal;
  font-size: 1em;
  line-height: inherit;
  transition: background-color 300ms ease-out;}
ul.categoryList li.current a, ul.categoryList li.current button {
  background: #008CBA;
  color: #FFFFFF;
  font-weight: bold;
  cursor: default;}
div.Pages.userPhotobook .itembox {
  background: transparent;
  padding: 0 0 2.5rem 0;
  border-bottom: dotted 2px #ccc;
  border-radius: unset;}
  @media only screen and (min-width: 40.063em) {
    div.Pages.userPhotobook .itembox {
      border-bottom: none;}}
div.Pages.userPhotobook div.jacket img {
  width: 360px;
  height: 400px;
  border: none;
  object-fit: cover;
  object-position: 0 25%;}
div.Pages.userPhotobook h2 {
  font-size: 1.2rem;
  margin-bottom: 0.7rem;
  margin-top: .5rem;
  text-align: left;
  font-weight: bold;
  line-height: 1.6;}
div.Pages.userPhotobook p.descriptionBind {
  font-size: 0.9rem;
  margin-bottom: 0.7rem;}
div.Pages.userPhotobook p.descriptionBind span {
  background: #F2F5FA;
  padding: 0.3rem 1rem;
  letter-spacing: 0.1em;
  border-radius: 2px;}
.pagination-centered {
  text-align: center;}
ul.pagination {
  display: block;
  min-height: 1.5rem;
  margin-left: -0.3125rem;}
.pagination-centered ul.pagination li {
  float: none;
  display: inline-block;}
ul.pagination li {
  height: 1.5rem;
  color: #222222;
  font-size: 0.875rem;
  margin-left: 0.3125rem;}
ul.pagination li a, ul.pagination li button {
  display: block;
  padding: 0.0625rem 0.625rem 0.0625rem;
  color: #999999;
  background: none;
  border-radius: 3px;
  font-weight: normal;
  font-size: 1em;
  line-height: inherit;
  transition: background-color 300ms ease-out;}
ul.pagination li.current a, ul.pagination li.current button {
  background: #008CBA;
  color: #FFFFFF;
  font-weight: bold;
  cursor: default;}
.backcolor {
  background-color: #8E8E8E !important;}
div.Pages.userPhotobook .items {
  margin-top: 2rem;}
summary::marker {
  transition: transform 1.0s ease;}
/* テンプレート一覧おわり */




/* パーツなど */
/* デコレーション */
.red_nomal_text {
  color: #f00;
  font-size: 1.0em;}
.red_text {
  color: #f00;
  font-size: 0.8em;}
/* ダウンロードボタン */
.smallwide .dlBtn{
  margin-top: 90px;}
.dlBtn{
  margin-top: 1.0rem;
  display: grid;     
  gap: 4px;
  grid-auto-rows: auto;
  justify-items: stretch;
  justify-content: center;
  align-items: center;
  align-content: center;}
.dlBtn .btn{
  width: 100%;
  justify-content: center;}
.dlBtnGreen {
  margin: 4px auto;
  color: #fff;
  background-color: #10AF9E;
  border-radius: 6px;
  display: inline-block;
  justify-content: center;
  padding: 20px 40px;
  width: fit-content;
  border: 2px solid #10AF9E;}
.dlBtnGreen:hover {
  background-color: #fff;
  border: 2px solid #10AF9E;
  color:#10AF9E;}
.dlBtnGreen i.fas.fa-download{
  margin-right: 15px;
  border: none;}
/*-----------------リンクボタン-----------------*/
.dlBtnWhite {
  margin: 4px 0px;
  color: #10AF9E;
  background-color: #ffffff;
  border-radius: 6px;
  display: inline-block;
  padding: 20px 40px;
  border: 2px solid #10AF9E;}
.dlBtnWhite i.fas.fa-caret-right{
  margin-left: 6px;
  margin-right: 18px;
  border: none;}
.dlBtnWhite :hover {
  opacity: 0.7;}