/*!
 * ress.css • v2.0.2
 * MIT License
 * github.com/filipelinhares/ress
 */

/* # =================================================================
   # Global selectors
   # ================================================================= */

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
  word-break: break-word;
  -moz-tab-size: 4;
  tab-size: 4;
}

*,
::before,
::after {
  background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  box-sizing: inherit;
}

::before,
::after {
  text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0; /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

/* # =================================================================
   # General elements
   # ================================================================= */

hr {
  overflow: visible; /* Show the overflow in Edge and IE */
  height: 0; /* Add the correct box sizing in Firefox */
}

details,
main {
  display: block; /* Render the `main` element consistently in IE. */
}

summary {
  display: list-item; /* Add the correct display in all browsers */
}

small {
  font-size: 80%; /* Set font-size to 80% in `small` elements */
}

[hidden] {
  display: none; /* Add the correct display in IE */
}

abbr[title] {
  border-bottom: none; /* Remove the bottom border in Chrome 57 */
  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  text-decoration: underline;
  text-decoration: underline dotted;
}

a {
  background-color: transparent; /* Remove the gray background on active links in IE 10 */
}

a:active,
a:hover {
  opacity: 0.3;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* Specify the font family of code elements */
}

pre {
  font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
}

b,
strong {
  font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}


/* # =================================================================
   # Specify media element style
   # ================================================================= */

img {
  border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

svg:not([fill]) {
  fill: currentColor;
}

/* # =================================================================
   # Accessibility
   # ================================================================= */

/* Hide content from screens but not screenreaders */
@media screen {
  [hidden~="screen"] {
    display: inherit;
  }
  [hidden~="screen"]:not(:active):not(:focus):not(:target) {
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
  }
}

/* Specify the progress cursor of updating elements */
[aria-busy="true"] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled] {
  cursor: default;
}

@charset "UTF-8";    /* 文字コードの指定 */
@import 'https://fonts.googleapis.com/css?family=Abel';    /* Google Fonts用のCSSを読み込み */

html
{
    font-size: 80%;
    margin-left: auto;
    margin-right: auto;
}

body
{
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
    font-size: 1.3rem;
    line-height: 1.6;
    text-align: center;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

#wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

#waist {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    background: #F8B62C;
}
aist2 {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    background: #fff;
}

#shoulder {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    background: #FF5B40;
}
#shoulder2 {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    background: #fff;
}

#ass {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    background: #4DD395;
}
#ass2 {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    background: #fff;
}

.main{
  height: 100%;
  margin: 0;
  background-image: url(../img/main.jpg);
  background-size: cover;
  position: relative;
  height:100%;
}

.w{
  width: 100%;
  text-align: center;
  margin: 0 auto;
  max-width: 900px;
  padding-top: 2%;
  padding-bottom: 2%;
}

p.small{
  font-size: 0.7em;
}


h1{
  font-size: 3em;
  font-weight: 900;
  line-height: 1.4;
  padding-top: 6%;
  color: #fff;
  text-shadow:0px 0px 5px #6e6e6e;
  z-index: 1;
}

@media screen and (max-width: 640px) {
	h1{
		font-size: 1.5em;
	}
}

h2{
  font-size: 2em;
  line-height: 1.4;
  margin-top: 2%;
  color: #fff;
  text-shadow:0px 0px 5px #6e6e6e;
}

@media screen and (max-width: 640px) {
	h2{
		font-size: 1.5em;
	}
}

h3.waist{
  line-height: 1.4;
  margin-top: 2%;
  margin-bottom: 4%;
  color: #F8B62C;
}

h3.shoulder{
  line-height: 1.4;
  margin-top: 2%;
  margin-bottom: 4%;
  color: #FF5B40;
}

h3.ass{
  line-height: 1.4;
  margin-top: 2%;
  margin-bottom: 4%;
  color: #4DD395;
}

h4 {
  position: relative;
  text-align: left;
  color: #000000;
  line-height: 1.5;
  margin: 2em 0 1em 1em;
}

*, *:before, *:after {
	box-sizing: border-box;
}
.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_3 > div{
	width: 33.3333%;
	padding: 10px;
}

*, *:before, *:after {
	box-sizing: border-box;
}
.col_2{
	width: 100%;
  display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_2 > div{
	width: 45%;
	padding: 2% 5%;
}

@media screen and (max-width: 640px) {
	.col_2 > div{
		width: 100%;
	}
}

.flame_w{
  margin: 5% 2%;
  padding: 1.5% 1%;
  border-radius: 8px;
  border: solid 3px #F8B62C;
}

.flame_w p{
  text-align: left;
}

.flame_s{
  margin: 5% 2%;
  padding: 1.5% 1%;
  border-radius: 8px;
  border: solid 3px #FF5B40;
}

.flame_s p{
  text-align: left;
}

.flame_a{
  margin: 5% 2%;
  padding: 1.5% 1%;
  border-radius: 8px;
  border: solid 3px #4DD395;
}

.flame_a p{
  text-align: left;
}

.order{
  padding: 0.8em 0;
  margin: 4% 6%;
}

.order > div {
  overflow: auto;
  min-width: 0;
}

ul {
  border: solid 4px #389bab;
  background-color: rgba(255,255,255,0.7);
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  margin-top: 12%;
  margin-bottom: 10%;
  text-align: left;
  border-radius: 6px;
}

ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

ul li:before {
  /*リストのアイコン*/
  font-family: "FontAwesome";
  content: "\f00c";
  left : 1em; /*左端からのアイコンまでの距離*/
  margin-right: 0.5em;
  color: #389bab; /*アイコン色*/
}

ul li:after {
  /*タブ*/
  background: #389bab;
  color: #fff;
  font-family: "FontAwesome";
  position: absolute;
  left: -4px;
  bottom: 100%;
  padding: 5px 12px;
  content: '\f0a7  こんな方にオススメ';/*アイコンコード＋文字*/
  letter-spacing: 0.05em;/*字間*/
  border-radius: 6px 6px 0 0;
}

.btn {
    display: inline-block;
    padding: 3% 0;
    margin-bottom: 3%;
    text-decoration: none;
    color: #fff;
    font-size: 1.2em;
    border-radius: 8px;
    transition: .4s;
    background: #Bf0000;
    width: 90%;
}

.btn:hover {
    opacity: 0.3;
}

.img{
  width: auto;
  padding-bottom: 2%;
}

.box26 {
  position: relative;
  margin: 5% 2%;
  padding: 1.5% 1%;
  border-radius: 8px;
  background-color: #fff;
}

.box26 .box-title {
  position: relative;
    display: inline-block;
    margin: 1% 0.5% 0.5%;
    font-size: 1.5em;
    color: black;
    font-weight: bold;
}

.box26 p {
  margin: 2%;
  padding: 0;
  line-height: 1.5em;
  text-align: left;
}

@media screen and (max-width: 640px) {
	.box26 p{
		font-size: 0.9em;
	}
}


#copyright{
  font-size: 60%;
  padding: 2% 0 ;
}

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}

figure {
  float: left;
  margin: 1%;
  width: 25%;
}

figure img {
  max-width: 90%;
}

figure2 {
  float: right;
  margin: 0 15px 15px 15px;
  width: 50%;
}

figure2 img {
  max-width: 100%;
  margin-top: 0%;
}

figure3 {
  position: relative;
  float: left;
  margin: 15px 15px 15px 15px;
  width: 38%;
  z-index: 10000;
}

figure3 img {
  max-width: 100%;
  margin-top: 0%;
}