@charset "UTF-8";


body, button, th, td, li, h1, h2, h3, h4, h5, h6 { font: 1.6rem/150%  'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif; font-weight: normal; }

@font-face {
  font-family: "SupremaBlack";
  src: url("../font/SupremaBlack.woff") format("woff");
}
@font-face {
  font-family: "SupremaBold";
  src: url("../font/SupremaBold.woff") format("woff");
}
/*@font-face {
  font-family: "SupremaRegular";
  src: url("../font/SupremaRegular.woff") format("woff");
}*/
@font-face {
  font-family: "Anteb-Regular";
  src: url("../font/Anteb-Regular.woff") format("woff");
}
@font-face {
  font-family: "Anteb-ExtraLight";
  src: url("../font/Anteb-ExtraLight.woff") format("woff");
}

/*
1block 940 x 400
縦単位 400 / 4 = 100、100 / 4 = 25、 25 / 4 = 6
*/

:root {
  --mainBG: hsl( 200, 80%, 32%);
  --asortColor: hsl( 200, 30%, 50%);
  --txtColor: hsl( 200, 30%, 100%);
}

.asortColor { color: var(--asortColor)!important }




body { background:  var(--mainBG) }

#borderLine_top { height:25px; background: url("../images/BG.gif"); }
#orangeLine_top { height:25px; background: #e19331}

#borderLine_bottom { background: url("../images/BG.gif");  }
#orangeLine_bottom { height:30px; background: #e19331; }

#footerMenu { padding: 100px }
#footerMenu a, #footerMenu li { color: var(--txtColor); text-decoration: none; font-family: "Anteb-ExtraLight"; padding: 10px  }
#footerMenu a:hover { text-decoration: underline; }
#copyright { text-align: right; }




#header {}
#headerInner { width: 940px; margin: 0px auto; padding: 75px 0px 50px; color: var(--txtColor)}
#myNameIs { font-size: 65px; font-family: "SupremaBlack"; letter-spacing: 1px; margin-bottom: 25px; line-height: 5rem}
h2#jobTitle { font-size: 33px; font-family: "SupremaBold"; margin-bottom: 25px; }
h2 span {  background: #e2c436; border-radius: 3px; margin: 0px 6px 0px 25px}
h1 span{ border: 1px solid var(--txtColor); padding: 12px 24px; border-radius: 30px }
#iconWhite { width: 100px; margin-top: 12px }


#container { width:940px; color: var(--txtColor); margin: 0px auto }
#container a { color: var(--txtColor);}
#container a:hover { text-decoration: none }

#container .mini { color: var(--txtColor) }
.yellowLine { background: #e2c436; height: 6px; border-radius: 3px; margin: 0px 6px}





/*#pagehome*/
#pagehome { background:  var(--mainBG) }

#mainArea { padding:50px; border: 1px solid var(--txtColor); margin: 0px 0px 100px; position: relative;}
#mainArea dt { font-family: "Anteb-Regular"; width: 12rem }
#mainArea dd { font-family: "Anteb-ExtraLight"}
.triangle { position: absolute; right: 0; bottom: 0; width: 0; height: 0;
border-style: solid;
border-width: 0 0 25px 25px;
border-color: transparent transparent var(--txtColor) transparent; }


.ParagraphBlock p, .ParagraphBlock ul { margin-left: 100px }

h1, h2, h3, h4, h5, h6 { font-family: "SupremaBold"; }

h2 { font-size: 24px; font-weight: bold; margin-bottom: 12px; }
h3 { font-size: 18px; font-weight: bold; margin: 8px 0px 14px;
  border: 5px solid var(--asortColor); padding: 10px 10px 10px 20px; position: relative; }
h4 { font-size: 18px; font-weight: bold; margin: 18px 0px; }
h4 span { border-bottom: 1px solid var(--txtColor); }
h5 { color: var(--asortColor) }

.price .moreBigDouble { font-family: "SupremaBold"; }






/*pagehome*/
#pageContact #contactDl dt { width: 210px}
#pageContact #contactDl dd { padding-bottom: 10px}
#pageContact .formTxtWidth { width:100%;}

@media screen and (max-width: 660px) {
    #pageContact #contactDl dd{ clear: both; }
    #pageContact .formTxtWidth{ width: 100%;}
}







#pageContact .error { color:red; background:#ffe5e5;}
#pageContact .cartConfirm  { text-align: center; padding: 10px; width: 648px; border: 1px dotted #CCC; margin: 15px 0px 13px 0px; }
#pageContact .buttonSubmitStyle { white-space:normal; padding:0px 45px; height:45px; font-size:17px; border-radius:10px; cursor:pointer; border:1px solid #2985cc; color:var(--txtColor);

background: #449fe5; /* Old browsers */
background: -moz-linear-gradient(top, #449fe5 1%, #2b7cd8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#449fe5), color-stop(100%,#2b7cd8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #449fe5 1%,#2b7cd8 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #449fe5 1%,#2b7cd8 100%); /* W3C */
}
#pageContact .buttonSubmitStyle:hover { background:#449fe5}
#pageContact .buttonSubmitStyle:active { background:#1165a6}







@media screen and (max-width: 940px) {
    h1 { font-size: 13px }
    #headerInner, #container { width:100%; padding-left: 10px; padding-right: 10px  }
    #mainArea { height: auto; padding: 50px 25px 50px;}
    #mainArea dd { clear: both; margin-left: 6rem }

    .youtubeAdjust{ position:relative; padding-bottom: 56.25%; padding-top:30px; height:0; overflow:hidden;}
    .youtubeAdjust iframe{ position:absolute; top:0; left:0; width:100%; height:100%; }
}

@media screen and (max-width: 414px) {
    #footerMenu { padding: 100px 50px }
}
@media screen and (max-width: 375px) {
    #myNameIs { font-size: 55px; line-height: 4.5rem }
    h1 { font-size: 11px }
}
@media screen and (max-width: 320px) {
    #myNameIs { font-size: 48px }
}