/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {    color: #333;    font-size: 1em;    line-height: 1.6;}

::-moz-selection {    background: #b3d4fc;    text-shadow: none;}
::selection {    background: #b3d4fc;    text-shadow: none;}
hr {    display: block;    height: 1px;    border: 0;    border-top: 1px solid #ccc;    margin: 1em 0;    padding: 0;}
audio,canvas,iframe,img,svg,video {    vertical-align: middle;}
fieldset {    border: 0;    margin: 0;    padding: 0;}
textarea {    resize: vertical;}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade {    margin: 0.2em 0;    background: #ccc;    color: #000;    padding: 0.2em 0;}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* common settings
-------------------------------- */
body{ font-size:16px; line-height:170%; color:#222; margin:0; padding:20px;
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
   }

img{ max-width: 100%; height: auto;}
/* 
*/
/* link color */
a			{ color:#49769B;}
a:hover		{ color:#B84749;}
a:visited	{ color:#253A6C;}

.memo{ color:#777;}

.pcOnly{display: block;}
.spOnly{display: none;}
@media (max-width: 680px) {
   .pcOnly{display: none;}
   .spOnly{display: block;}
}




/* ----- case */

.bx-wrapper{ max-width: 640px; margin-left: auto; margin-right: auto;}
.bx-viewport{margin-left: auto; margin-right: auto;}
.bx-wrapper img {    margin-left: auto;    margin-right: auto;}

h1{font-size: 24px; text-align: center;}
.txt{ max-width: 640px; margin: 0 auto;}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/* スクリーンリーダを含めてすべて隠す
-------------------------------- */
.hidden {    display: none !important;}

/* 視覚的に隠すが、スクリーンリーダには読ませる:
   http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
-------------------------------- */
.visuallyhidden {    border: 0;    clip: rect(0 0 0 0);    height: 1px;    margin: -1px;    overflow: hidden;    padding: 0;    position: absolute;    width: 1px;}

/* .visuallyhiddenをフォーカス可能にする
   https://www.drupal.org/node/897638
-------------------------------- */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {    clip: auto;    height: auto;    margin: 0;    overflow: visible;    position: static;    width: auto;}

/* 視覚的にスクリーンリーダーから隠すが、レイアウトを維持
-------------------------------- */
.invisible {    visibility: hidden;}

/* clearfix
-------------------------------- */
.clearfix:before,
.clearfix:after {    content: " "; /* 1 */    display: table; /* 2 */}
.clearfix:after {    clear: both;}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}