@charset "UTF-8";
/*
 * Copyright (c) 2006-2019 LeARU Inc
 */
/*
【注意】
このスタイルシートは書き換え禁止です。
変更する場合はmain.cssにオーバーライドしてください。
*/


/*シンプルボックス
---------------------------------------------------------------------------*/

/* ノーマルボックス（枠なし）*/
.box {
 margin: 0 auto;
 background-color: #fff;
}

/* ノーマルボックス(枠付き)*/
.box01 {
 margin: 0 auto;
 background-color: #fff;
 border: 1px solid #999;
}

/* ノーマルボックス（点線）*/
.box02 {
 margin: 0 auto;
 background-color: #fff;
 border: 1px dashed #999;
}

/* ノーマルボックス（二重線）*/
.box03 {
 margin: 0 auto;
 background-color: #fff;
 border: 4px double #999;
}

/* ノーマルボックス（二重線・外側太線）*/
.box04 {
 border:3px solid #999;
 outline: 1px solid #999; 
 outline-offset: -10px;
}

/* ノーマルボックス（二重線・内側点線）*/
.box05 {
 border:3px solid #999;
 outline: 1px dashed #999; 
 outline-offset: -10px;
}

/* ノーマルボックス（内側線）*/
.box06 {
 margin: 0 auto;
 background-color: #f1f1f1; 
 box-shadow: 0px 0px 0px 7px #f1f1f1;
 border: 1px solid #999;
}

/* ノーマルボックス（内側線・点線）*/
.box07 {
 margin: 0 auto;
 background-color: #f1f1f1; 
 box-shadow: 0px 0px 0px 7px #f1f1f1;
 border: 1px dashed #999;
}

/* ノーマルボックス（内側線・二重線）*/
.box08 {
 margin: 0 auto;
 background-color: #f1f1f1; 
 box-shadow: 0px 0px 0px 7px #f1f1f1;
 border: 4px double #999;
}



/*ボックスシャドウ
---------------------------------------------------------------------------*/
/* シャドウ１（下部両側捲れ）*/
.box-s00 {
  position: relative;
  min-height:auto;
  background:#FFF;
  margin:0 auto;
  box-shadow: 0px 3px 10px 0px rgba(0,0,0,.2);  
}

/* シャドウ１（下部両側捲れ）*/
.box-s01 {
  position: relative;
  min-height:auto;
  background:#FFF;
  margin:0 auto;
  box-shadow: 0px 3px 10px 0px rgba(0,0,0,.2);  
}
.box-s01:before, .box-s01:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #bbb;
  -webkit-box-shadow: 0 15px 10px #bbb;
  -moz-box-shadow: 0 15px 10px #bbb;
  box-shadow: 0 15px 10px #bbb;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.box-s01:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

/* シャドウ２（下部左捲れ）*/
.box-s02 {
  position: relative;
  min-height:auto;
  background:#FFF;
  margin:0 auto;
  box-shadow: 0px 3px 10px 0px rgba(0,0,0,.2); 
}
.box-s02:before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #bbb;
  -webkit-box-shadow: 0 15px 10px #bbb;
  -moz-box-shadow: 0 15px 10px #bbb;
  box-shadow: 0 15px 10px #bbb;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

/* シャドウ３（下部右捲れ）*/
.box-s03 {
  position: relative;
  min-height:auto;
  background:#FFF;
  margin:0 auto;
  box-shadow: 0px 3px 10px 0px rgba(0,0,0,.2); 
}
.box-s03:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #bbb;
  -webkit-box-shadow: 0 15px 10px #bbb;
  -moz-box-shadow: 0 15px 10px #bbb;
  box-shadow: 0 15px 10px #bbb;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

/* シャドウ4（下部両側捲れ・大）*/
.box-s04 {
  position: relative;
  min-height:auto;
  background:#FFF;
  margin:0 auto;
  box-shadow: 0px 3px 10px 0px rgba(0,0,0,.2); 
}
.box-s04:before, .box-s04:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #bbb;
  -webkit-box-shadow: 0 25px 20px #bbb;
  -moz-box-shadow: 0 25px 20px #bbb;
  box-shadow: 0 25px 20px #bbb;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.box-s04:after {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

/* シャドウ５（紙質グレイ／下部シャドウ）*/
.box-s05 {
  position:relative;
  min-height:auto;
  background:#FFF;
  margin:0 auto;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.box-s05:before, .box-s05:after {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.3);
    box-shadow:0 0 20px rgba(0,0,0,0.3);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.box-s05:after {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

/* シャドウ６（紙質グレイ／上下シャドウ）*/
.box-s06 {
  position:relative;
  min-height:auto;
  background:#FFF;
  margin:0 auto;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.box-s06:before, .box-s06:after {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.3);
    box-shadow:0 0 20px rgba(0,0,0,0.3);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.box-s06:after {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

/* シャドウ６（紙質グレイ／左右シャドウ）*/
.box-s07 {
  position:relative;
  min-height:auto;
  background:#FFF;
  margin:0 auto;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.box-s07:before, .box-s07:after {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.3);
    box-shadow:0 0 20px rgba(0,0,0,0.3);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.box-s07:after {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

















/*ノート風
---------------------------------------------------------------------------*/

/*線*/
.note{
  background-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 97%,
      #ddd 97%,
      #ddd 100%
    );
  background-size:100% 2em;
  line-height:2;
}
.note p{
  margin-bottom:2em;
}
/*点線*/
.note1{
  background-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 50%,
      #ffff 50%,
      #ffff 50%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 97%,
      #999 97%,
      #999 100%
    );
  background-size:
    8px 100%,
    100% 2em;
  line-height:2;
}
.note1 p{
  margin-bottom:2em;
}

/*手紙風
---------------------------------------------------------------------------*/
/*手紙01*/
.letter {
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  margin: 30px auto;
  min-height: 150px;
  padding: 40px 40px 60px 40px;
  position: relative;
  width: 85%;
}
.letter:before, .letter:after {
  content: "";
  height: 98%;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.letter:before {
  background: #fafafa;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  left: -5px;
  top: 4px;
  transform: rotate(-2.5deg);
}
.letter:after {
  background: #f6f6f6;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  right: -3px;
  top: 1px;
  transform: rotate(1.4deg);
}
/*手紙01*/
.sample {
    margin: 30px auto;
    position: relative;
    padding: 14px;
    width: 92%;
    background: -webkit-repeating-linear-gradient(135deg, #d43 0px, #d43 20px, #fec 20px, #fec 40px, #226 40px, #226 60px, #fec 60px, #fec 80px);
    background: repeating-linear-gradient(135deg, #d43 0px, #d43 20px, #fec 20px, #fec 40px, #226 40px, #226 60px, #fec 60px, #fec 80px);
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 6px rgba(0,0,0,0.6);
    box-shadow: 0 0 6px rgba(0,0,0,0.6);
}
.sample section{
    padding: 30px;
    background: #fec;
    color: #430;
}